<el-table :data="tableData" :max-height="maxHeight" :min-height="minHeight" @select="handleSelect" @select-all="handleSelectAll">
<el-table-column v-if="isCheck" type="selection" width="55" align="center" ></el-table-column>
<el-table-column :prop="item.prop" :label="item.label" v-for="item in columnData" :key="item.id" :width="item.width"
:fixed="item.fixed" align="center" >
<template v-slot="{ row }">
<slot :name="item.prop" :row="row" v-if="!item.visable" >
{{ getProp(row, item) }}
</slot>
</template>
</el-table-column>
<template v-slot:empty>
<el-empty description="暂无数据"></el-empty>
</template>
</el-table>
export default {
name: "Tables",
props: {
tableData: {
type: Array,
default: [],
},
columnData: {
type: Array,
},
tableLoading: {
type: Boolean,
default() {
return false;
},
},
isCheck: {
type: Boolean,
default() {
return false;
},
},
handleSelect: {
type: Function,
},
handleSelectAll: {
type: Function,
},
isStripe: {
type: Boolean,
default() {
return false;
},
},
maxHeight: {
type: String
},
minHeight: {
type: String
},
height: {
type: String
}
},
data() {
return {};
},
methods: {
// 处理传递的属性名是xxx[x].xxx (只能链选一层)
getProp(row, item) {
let reg = /^(.+)\[(\d+)\]\.?(.*)$/;
let matched = item.prop.match(reg);
if (matched) {
let arr = row[matched[1]];
let prop = arr[matched[2]];
let prop2 = prop[matched[3]];
return prop2;
}
return row[item.prop];
},
},
};
</script>
elementPlus tables表格的二次封装
于 2024-02-22 09:29:55 首次发布