element-ui 封装 表格

一、封装表格组件

<template><el-table :data="list" :default-sort="{ prop: 'date' }" style="width: 100%"><template v-for="item in tableColumn"><el-table-columnv-if="item.filters":prop="item.prop":label="item.label":sortable="item.sortable":filters="item.filters":filter-method="filterHandler(item.filterMethod)"/><el-table-columnv-if="!item.filters":prop="item.prop":label="item.label":sortable="item.sortable"/></template></el-table>
</template><script scoped>
export default {data() {return {list: [],tableColumn: [],};},props: {data: {type: Array,default: [],},column: {type: Array,default: [],},},watch: {data: {immediate: true,deep: true,handler(val) {if (val.length) {this.list = JSON.parse(JSON.stringify(val));}},},column: {immediate: true,deep: true,handler(val) {if (val.length) {this.tableColumn = JSON.parse(JSON.stringify(val));}},},},methods: {// 如果没传，那么默认等值判断filterHandler(filterMethod) {if (filterMethod) {return item.filterMethod;} else {return (value, row, column) => {const property = column["property"];return row[property] === value;};}},},
};
</script>

二、使用方法

<template><div id="app"><Tabel :data="data" :column="column" /></div>
</template><script>
import Tabel from "@/components/Tabel.vue";
export default {components: { Tabel },data() {return {column: [{label: "日期",prop: "date",sortable: true,},{label: "姓名",prop: "name",filters: [{ text: "王小龙", value: "王小龙" }],},{label: "地址",prop: "address",},],data: [{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>