• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

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

开发技术 开发技术 4小时前 3次浏览

子组件,表格

<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
        }
      ]
    }
  }
}

  


程序员灯塔
转载请注明原文链接:使用插槽实现ant table的基础功能
喜欢 (0)