关于vue.js:antddesignvue-Tableslot插槽动态单元列个性化样式操作

Table(slot插槽)惯例操作

一、scopedSlots属性

 const columns =[
  ...   
  "scopedSlots": {
    "customRender": "field"  //field须要与dataIndex字段对应
  },
  ]
  
  页面里
  <a-table>
  ...
     <div slot="field" slot-scope="text" style="color: red">{{text}}</div>
  </a-table>
  
  

文档：https://www.antdv.com/compone…

动静slot插槽

一、区别
以往页面哪列操作字段就写死在页面里，动静是field字段不确定，留给用户本人配置。

二、columns中的json很要害

1、colProperty能够了解为columns索引，数据有多少列即colProperty就有多长。因为波及到多表头，当遇到children上面的字段就没办了。

2、cols才是表头显示内容，外面有scopedSlots于其余属性。

 "colProperty": [
        {
            "sorter": "0",
            "scopedSlots": 0,
            "dataIndex": "C1",
            "width": "100",
            "fixed": "false",
            "title": "字段一",
            "align": "center"
        },
        {
            "sorter": "0",
            "scopedSlots": 1,
            "dataIndex": "C2",
            "width": "100",
            "fixed": "false",
            "title": "字段二",
            "align": "center"
        }
    ],
     "cols": [
        {
            "sorter": false,
            "dataIndex": "C1",
            "width": 100,
            "fixed": false,
            "title": "字段一",
            "align": "left",
            "className": "notshow"
        },
        {
            "sorter": "(a, b) => a.C2 - b.C2",
            "scopedSlots": {
                "customRender": "C2"
            },
            "dataIndex": "C2",
            "width": 100,
            "fixed": false,
            "title": "字段二",
            "align": "left"
        }
    ],
    

三、操作

1、在a-table里的columns为this.columns.cols

<a-table :columns="cols">...</a-table>

2、在computed写一个事件，columnsCustom是给插槽循环用

computed: {
    columnsCustom() {
      return this.columns.colProperty.filter(item => {
    return item
    })
  },
},

3、slot插槽里的写法,依据判断colProperty里的scopedSlots(当然你设置type也行)是否开启个性化配置该列。

<div
  v-for="(item, index) in columnsCustom"
  :key="index"
  :slot="item.dataIndex" 
  slot-scope="text"
>
  <div v-if="item.scopedSlots == '1'">
     <div style="color: red">{{text}}</div>
  </div>
  <div v-if="item.scopedSlots == '0'">{{text}}</div>
</div>

总结

1、json配置最为要害须要建设一个列索引。
2、须要computed里对插槽做事件便于循环，因为下面说了，对于多表头惯例写法根本有效。