自定义表格
- Table.vue 表格模板，通过插槽进行填充不同的结构
问题：用来做循环的父盒子不能template 不能添加自定义属性。求大老解决
<template>
<el-table :data="tableData" style="width: 100%" class="tab">
<template v-for="item in tabcur" :key="item">
<el-table-column :label="item.labelName" v-if="item.compon">
<template #default="scope">
<slot :name="item.fied" :rows="scope.row">
<p>自定义的组件</p>
</slot>
</template>
</el-table-column>
<el-table-column :prop="item.fied" :label="item.labelName" v-else />
</template>
<el-table-column fixed="right" label="操作" width='160'>
<template #default="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
>Edit</el-button
>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>Delete</el-button
>
</template>
</el-table-column>
</el-table>
</template>
<script lang="ts">
export default {
components: {
},
props: {
tableData: Object,
tabcur: Object
},
setup (props: any) {
const handleEdit = (index: String, row: any) => {
console.log(index, row)
}
const handleDelete = (index: any, row: any) => {
console.log(index, row)
}
return {
handleEdit,
handleDelete
}
}
}
</script>
<style lang="less">
.tab {
margin-top: 30px;
}
</style>
O2O.vue 使用
核心是作用域插槽
<template>
<div class="ShopContainer">
<Table :tableData="tableData" :tabcur="TabDataCur">
<template #date="scope">
<el-icon><timer /></el-icon>
<span style="margin-left: 10px">{
{
scope.rows.date }}</span>
</template>
<template #username="scope">
<el-popover effect="light" trigger="hover" placement="top">
<template #default>
<p>姓名: {
{
scope.rows.username }}</p>
<p>住址: {
{
scope.rows.address }}</p>
</template>
<template #reference>
<div class="name-wrapper">
<el-tag size="medium">{
{
scope.rows.username }}</el-tag>
</div>
</template>
</el-popover>
</template>
</Table>
</div>
</template>
<script lang="ts">
import Table from './TableComm.vue'
import {
reactive, toRefs } from 'vue'
import {
Timer } from '@element-plus/icons'
export default {
name: 'Shop',
components: {
Timer,
Table
},
setup () {
const data = reactive({
// 数据结构
TabDataCur: [
{
labelName: 'id',
fied: 'id',
compon: false
},
{
labelName: '姓名',
fied: 'username',
compon: true
},
{
labelName: '图片',
fied: 'img',
compon: true
},
{
labelName: '手机号码',
fied: 'phone',
compon: false
},
{
labelName: '会员编号',
fied: 'uid',
compon: false
},
{
labelName: '订单信息',
fied: 'order',
compon: false
},
{
labelName: '地址',
fied: 'address',
compon: false
},
{
labelName: '订单状态',
fied: 'orderStu',
compon: true
},
{
labelName: '支付状态',
fied: 'payStu',
compon: true
},
{
labelName: '支付日期',
fied: 'date',
compon: true
},
{
labelName: '支付方式',
fied: 'pay',
compon: false
}
],
// 数据
tableData: [
{
date: '2016-05-03',
username: 'cat',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-02',
username: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-04',
username: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
username: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}
]
})
return {
...toRefs(data)
}
}
}
</script>
<style lang="less" scoped></style>