elementUI中table组建实现自定义单元格

灵感来源 https://www.dazhuanlan.com/2019/10/07/5d9a906dc5c9f/

<template>
  <el-table
    v-bind="$attrs"
    v-on="$listeners"
    style="width: 100%">
    <table-column v-for="(val, index) in ($attrs.column || [])" :value="val" :key="index"/>
  </el-table>
</template>

<script>
  export default {
    // 核心点
    inheritAttrs: false,
    components: {
      'table-column': {
        props: {
          value: {
            required: true,
            type: Object,
            default: () => ({})
          }
        },
        render: function (h) {
          const attrs = this.value
			
		  if (attrs.type) {
            return (
              <el-table-column {...{attrs}}/>
            )
          }	  
		
          return (
            <el-table-column
            {...{attrs}}
            scopedSlots={
  {
              default: ({row, column, $index}) => {
                return this.value.render ? this.value.render(h, {row, column, $index}) : row[column.property]
              }
            }}>
            </el-table-column>
          )
        }
      }
    }
  }
</script>
{
      data: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      column: [{
          label: 'Date',
          prop: 'date'
        }, {
        label: 'Name',
        prop: 'name',
        render (h, {row, column, $index}) {
          const {name, address} = row
          return (
            <div style="color: red">
              {name + '------*****-----' +  address}
            </div>
          )
        }
      }]
    }

《elementUI中table组建实现自定义单元格》

    原文作者:忆达夫
    原文地址: https://blog.csdn.net/weixin_42590838/article/details/102825981
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞