子组件,表格
<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 } ] } } }