使用插槽实现ant table的基础功能

子组件，表格

<template>
  <div>
    <div class="list">
      <div class="list-con" v-for="item in columns" :key="item.dataIndex">
        <div class="table-headr">{{item.title}}</div>
        <div class="table-con" v-for="(i, index) in datas(item.dataIndex)" :key="index">
            <slot :name="item.scopedSlots ? item.scopedSlots.name : null" :text="datalist[index]"></slot>
            <span v-if="!item.scopedSlots">{{i ? i : '--'}}</span>
        </div>
      </div>
    </div>
    <div class="main"></div>
  </div>
</template>

　　

export default {
  data() {
    return {};
  },
  props: {
    columns: {
      type: Array,
    },
    datalist: {
      type: Array,
    },
  },
  methods: {
    datas(key) {
        return this.datalist.map(item => {
            return item[key]
        })
    },
  },
};

　　父组件

<List :columns="list" :datalist="datalist">
  <template v-slot:sex="data">
     {{data.text.sex === 0 ? '男' : '女'}}
  </template>
</List>

　　

import List from './components/index.vue'
export default {
  name: 'App',
  components: {
    List
  },
  data() {
    return {
      list: [{
        title: '姓名',
        dataIndex: 'name'
      },{
        title: '年龄',
        dataIndex: 'age'
      },{
        title: '性别',
        // dataIndex: 'sex',
        scopedSlots: {
          name: 'sex'
        }
      }],
      datalist: [
        {
          name: '老王',
          age: 20,
          sex: 0
        },
        {
          name: '老王',
          sex: 0
        },
        {
          name: '老王',
          age: 20,
          sex: 1
        }
      ]
    }
  }
}