“This is the 14th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

preface

This section describes how to use iView table. Iview Table is great for custom rendering. If I had to choose a table-related component, I would definitely choose iView over elementUI. Let’s take a look at the iView in the end where ~~~~

Introduce iView’s component library into the project

The first method uses CDN introduction.

<! --import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script><! --import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">
<! -- import iView -->
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>
Copy the code

The second method uses NPM installation.

$ npm install view-design --save
Copy the code

After NPM we also need to reference in the entry file:

Here I’ve introduced the entire iView component library, which you can reference as required. I’m not going to go into the details of the View UI and the website is very detailed on how to reference on demand.

2. Use the View Table component

A basic Table component

<template>
    <Card>
        <h4>Table example</h4>
        <Table :columns="column" :data="data"></Table>
    </Card>
</template>
 
<script>
export default {
     data(){
        return {
            column:[
                {title:'number'.key:'id'},
                {title:'name'.key:'name'},
                {title:'gender'.key:'gender'}].data:[
                {id:1.name:'Ming'.gender:'male'},
                {id:2.name:'flower'.gender:'woman'}]}}}</script>
Copy the code

The above is just a basic iView table, sometimes we may need to customize the render data. Then you can’t just use key matches. So how do we use it? Iview provides a render function for customizing the render data:

<template>
  <Table height="185" class="post_table" :columns="columns" :data="data"
         :no-data-text="no_data_text"></Table>
</template>
<script>
  import {redirectHref} from "@/assets/utils";
  export default {
    name: "DianzanTable".props: {
      data: {
        type: Array.default() {
          return[]}},host: {
        type: String.default() {
          return ' '}}},data() {
      return {
        no_data_text: 'No data, hurry up and refuel! '.columns: [{title: 'place'.align: 'center'.width:50.render(h, {index}) {
              switch (index) {
                case 0:
                  return h('img', {
                    attrs: {
                      src: '/phx/kfcl/m3/prod/first.png',},style: {
                      width: '5vw'}})case 1:
                  return h('img', {
                    attrs: {
                      src: '/phx/kfcl/m3/prod/second.png',},style: {
                      width: '5vw'}})case 2:
                  return h('img', {
                    attrs: {
                      src: '/phx/kfcl/m3/prod/third.png',},style: {
                      width: '5vw'}})default:
                  return h('div', {}, params.index + 1}}}, {title: 'Personnel Information'.align: 'center'.width:90.render:(h, {row}) = > h('span', {}, `${row.uploaderName}(${row.city}) `)},
          {
            title: 'Video Name'.align: 'center'.render(h, params) {
              return h('div',
                [
                  h('button', {
                    style: {
                      background: 'none'.border: 'none'.textDecoration: 'none'.color: 'none'
                    }, on: {
                      click: () = > {
                        top.location.href = `${redirectHref()}/video_detail/ph_detail.html?   
                          videoBm=${params.row.videoBm}`}}},`${params.row.videoName}`)],)},}, {title: 'Likes'.align: 'center'.width:47.key:'videoLike'
            filter: [].filterMethod : (value,row) = > { / /... do something}}}},}</script>
Copy the code

Height: Defines the height of the table (in px)

No-data-text: the text to display in the table with no data (default text “no data yet”)

Columns array object: title: header name align: alignment width: custom width of each column in the table.

Render (h, Object) method

Custom Render columns, using Vue’s Render function. The first parameter is h, and the second is an object containing row, column, and index, which refer to the current row data, column data, and index, respectively.

The first argument in h() of return is the node label or component label. The second argument is an object that adds attributes, styles, and methods to the tag. The third parameter indicates what data to display for display.

When the data returned in the background is not the data you want to show to the page. You can use the Render function to process the data returned by the interface. In the above code, the data is basically processed.

RenderHeader (h, Object) method

Sometimes, we might want the table header display to be processed dynamically as well. At this point we can use the renderHeader function

  {
                        renderHeader(h, params) {
                            return h('span', {
                                    style:{

                                    }
                            }, [h('div', {},'Accumulated Transaction Amount (Ten thousand Yuan)'),h('div', {attrs: {
                                    id: 'salesAmountSW'}}})],),align: 'center'.width:100.render(h, params) {
                            let success_amount = (params.row.salesAmount / 10000).toFixed(2);
                            return h('div', {}, success_amount)
                        },
                    }
Copy the code

The specific use method is described above. The header and column data are processed using renderHeader and Render methods, respectively.

Table filtering data

    this.columns[3] ["filters"] = [{label:'more than 2500'.value:0}, {label:'less than 2500'.value:1}];
        this.columns[3] ["filterMethod"] =(e,row) = >{
            if (e===0)
            return row.videoLike>2500;
        else  
            return row.videoLike<2500;
        }
Copy the code

Form a multiple-choice

@on-selection-change: triggers selection whenever there is a change in the selection. The return value is selection.

<Table @on-selection-change="getSelect" :columns="colunmns" :data="List"></Table>
Copy the code
columns: [
    {
        type: 'selection'.align: 'center'
    },     
    {
        title: 'Name'.key: 'name'}, {title: 'Age'.key: 'age',}],Copy the code
methods:{
getSelect(selected){
 // Do some judging by the length of the selected array returned
        // Process the selected array, concatenate some of the selected values into a string, and send it to the background}}Copy the code

Custom table styles

In the code above, I added a class named post_table to the

tag pair so that we can select its descendant tags for processing according to the class selector. 

/* Note that the vue 
<style>
     /* Change the table width and background color */
  .post_table {
    border: none ! important;
    width: 74.5 vw;
    display: flex ! important;
    height: auto ! important;
    background-color: rgba(0.0.0.0) ! important;
  }
   /* Change th color to transparent */
  .post_table th {
    background-color: rgba(0.0.0.0) ! important;
  }
    /* Change the color of tBody to transparent */
  .small-table_DT .ivu-table-body {
    background-color: rgba(0.0.0.0);
  }
    
  .post_table .ivu-table {
    color: #B4CBE6;
    font-size: 13px;
    font-weight: bold;
  }
   /* Change the line height */
  .post_table .ivu-table td {
    height: 36px ! important;
  }

  .post_table .ivu-table-header table {
    width: 100% ! important;
  }
   
  .post_table .ivu-table-cell {
    font-size: 0.1 rem;
  }

  .post_table .ivu-table table {
    width: 100% ! important;
  }

  .post_table .ivu-table-tip tr td span {
    color: #fff;
  }

  .post_table th .ivu-table-cell {
    font-size: 11px ! important;
    font-weight: bold ! important;
    color: #FFE8A0 ! important;
    text-shadow: 0 5px 4px # 444

  }
</style>
Copy the code