在用el-table的时候, 用一个数组进行循环就可以了,但是当我们需要对某一列的数据进行二次处理就会用,那么就不能进行循环了,就需要在模版中一个一个的写,造成模版的代码量大,所以我就对el-table进行了二次封装
// 这是table.vue文件
<script>
export default {
name: "GTable",
props: {
serialNumber: { type: Boolean, default: true }, // 是否展示序号列
columns: {
type: Array,
required: true
}
},
data() {
return {
dataList: [],
pageInfo: {
total: 0,
pageNum: 1,
pageSize: 10,
pages: 1
}
};
},
methods: {
setIndex(index) {
const { pageNum, pageSize } = this.pageInfo;
return index + 1 + (pageNum - 1) * pageSize;
}
},
render() {
const { dataList } = this.$data;
const { serialNumber, columns } = this.$props;
// 渲染序号
const columnNumber = serialNumber ? (
<el-table-column
type="index"
width="120"
label="序号"
index={this.setIndex}
align="center"
/>
) : null;
// 渲染列的
const renderColumn = () => {
return columns.map(item => {
const attribute = {
key: item.label,
attrs: { ...item }
};
// 这里使用的就是作用域插槽
if (item.customRender) {
attribute.scopedSlots = {
default: this.$scopedSlots[item.customRender]
};
}
return <el-table-column {...attribute} />;
});
};
const rendeRempty = (
<template slot="empty">
<no-data></no-data>
</template>
);
// 渲染表格
const renderTable = (
<el-table data={dataList} style="width: 100%">
{columnNumber}
{renderColumn()}
{rendeRempty} //这个是无数据时表格的显示组件
</el-table>
);
return <div class="g-table">{renderTable}</div>;
}
};
</script>
在页面中使用table组件,table组件我全局注册了。
<template>
<g-table :columns="columns">
<template slot="operation" slot-scope="scope">
<!--可以对列的内容就行处理 -->
{{ scope.row }}
</template>
</g-table>```
</template>
<script>
export default {
data() {
return {
columns: [
{
label: "姓名",
prop: "name"
},
{
label: "手机号",
prop: "mobile"
},
{
label: "用户名",
prop: "username"
},
{
label: "操作",
customRender: "operation" // 这里就和上面的slot属性一样。
}
],
dialogFormVisible: false
};
},
}
</script>