关于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 里对插槽做事件便于循环，因为下面说了，对于多表头惯例写法根本有效。