举例 vue2这种不封装的 直接写的很罗嗦麻烦 下面圈起来的可以封装一个对象 进行循环
弊端: 循环后 无法进行获取更改某一列的值 比如data日期我需要转换年月日
不循环我直接在这个el-table-column的这一列进行写(如下)
<el-table-column label="日期" width="110" align="center"><template slot-scope="scope">{{ scope.row.data| dataFilter}} </template>
</el-table-column>
<template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></template><script>export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}}}</script>
但是我们循环的话怎么更改这个指定的一列呢
解决:插槽进行解决 vue3举例 原理是一样的
新建user.vue 父组件
<template><div class="user"> <div class="content"><Hy-table :listData="userList" :propList="propList"><template #status="scope"><el-button :type="scope.row.enable ? 'success' : 'error'">{{ scope.row.enable ? '启用' : '禁用' }}</el-button></template><template #createAt="scope">{{ scope.row.createAt }}</template></Hy-table></div></div>
</template><script lang="ts">
import { defineComponent, reactive, computed } from 'vue' //引入table.vue
import HyTable from '@/base-ui/table'
export default defineComponent({name: 'user', components: {HyTable }, setup() { //真实渲染数据const userList = [{cellphone : 13666666666,createAt: "2023-06-23T07:40:02.000Z"departmentId: 4745enable: 1id: 177044190name: "lebron"realname: "lebron111"roleId: 1updateAt: "2023-06-23T07:45:09.000Z"},{cellphone : 13666666666,createAt: "2023-06-23T07:40:02.000Z"departmentId: 4745enable: 1id: 177044191name: "lebron"realname: "lebron111"roleId: 1updateAt: "2023-06-23T07:45:09.000Z"}
]//表头const propList = [{ prop: 'name', label: '用户名', minWidth: '100' },{ prop: 'realname', label: '真实姓名', minWidth: '100' },{ prop: 'cellphone', label: '手机号码', minWidth: '120' },{ prop: 'enable', label: '状态', minWidth: '100', slotName: 'status' },{ prop: 'createAt', label: '创建时间', minWidth: '250', slotName: 'createAt' },{ prop: 'updateAt', label: '更新时间', minWidth: '250', slotName: 'updateAt' }]return { searchFormConfig, userList, propList }}
})
</script><style scoped>
</style>
新建table.vue子组件
<template><div class="hy-table"><!-- listData 内容 --><el-table :data="listData" border style="width: 100%"><!-- 头部 --><template v-for="propItem in propList" :key="propItem.prop"><el-table-column v-bind="propItem" align="center"><template #default="scope"><slot :name="propItem.slotName" :row="scope.row">{{ scope.row[propItem.prop] }}</slot></template></el-table-column></template></el-table></div>
</template><script lang="ts">
import { defineComponent, PropType } from 'vue'
//import { tableForm } from '../types'export default defineComponent({props: {listData: {type: Array,require: true},propList: {// type: Array as PropType<tableForm[]>//但是不确定其他组件调用传输的参数 所以不这么写type: Array,require: true},data: {}},setup() {return {}}
})
</script><style scoped>
</style>