步骤:
1、封装一个table组件(子)
- 子用prop接收传过来的数据 :表头数据、表体数据等
- 若子需要向父传递事件则用$emit
2、使用table的组件(父)
- 在子标签上绑定传过去的数据
3、配置表头数据(个人习惯觉得代码更清晰)
- 将表头数据独自创建的js中
封装的table组件(子)
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="index" label="序号" width="150" />
<template v-for="item in tableOptions" :key="item.label">
<el-table-column
:prop="item.prop"
:label="item.label"
:width="item.width"
>
<template #="scope">
<slot v-if="item.slot" :scope="scope" />
<!-- <span v-else>{
{ scope.row[item.prop] }}</span> -->
<span v-else>{
{ getData(item, scope) }}</span>
</template>
</el-table-column>
</template>
<el-table-column fixed="right" label="Operations" width="120">
<template #default>
<el-button link type="primary" size="small">Detail</el-button>
<el-button link type="primary" size="small">Edit</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props: {
tableData: {
type: Array,
required: true,
},
tableOptions: {
type: Array,
required: true,
},
},
setup(props) {
// 版本一
const getData = (item, scope) => {
return item.map
? item.map[scope.row[item.prop]] || item.map["_"]
: scope.row[item.prop];
};
return {
getData,
props,
};
},
};
</script>
<style lang="less" scoped></style>
使用table的组件(父):
<template>
<div>
<Table :tableData="tableData" :tableOptions="tableOptions"></Table>
</div>
</template>
<script>
import Table from "./GoodsMain.vue";
import tableOptions from "./tableOptions";
export default {
components: {
Table,
},
setup() {
const tableData = [
{
date: "2016-05-03",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
tag: "Home",
sex: 1,
},
{
date: "2016-05-02",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
tag: "Office",
sex: 0,
},
{
date: "2016-05-04",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
tag: "Home",
sex: 1,
},
{
date: "2016-05-01",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
tag: "Office",
sex: 1,
},
];
return {
tableData,
tableOptions,
};
},
};
</script>
<style lang="less" scoped></style>
定义好的表头数据:
export default [
{
prop: "date",
label: "时间",
width: "150",
},
{
prop: "name",
label: "名字",
width: "120",
},
{
prop: "sex",
label: "性别",
width: "120",
map: { 0: "女", 1: "男" },
},
{
prop: "state",
label: "状态",
width: "120",
},
{
prop: "city",
label: "城市",
width: "120",
},
{
prop: "address",
label: "地址",
width: "500",
},
{
prop: "zip",
label: "压缩包",
width: "120",
},
];
效果图: