郭庆泰
a837e43b53
- gr-table.vue: 通用 el-table 封装 (展开详情 + 事件透传) - gr-table-simple.vue: 简化版表格 - gr-table-plus.vue: 增强版 (筛选框 + 展开详情)
94 lines
2.8 KiB
Vue
94 lines
2.8 KiB
Vue
<template>
|
|
<div>
|
|
<el-table v-if="showTable" ref="mesSysTable" :data="data" :border="border" :height="height"
|
|
@select="(evt) => $emit('select',evt)" @select-all="(evt) => $emit('select-all',evt)"
|
|
@selection-change="(evt) => $emit('selection-change',evt)" @cell-mouse-enter="(evt) => $emit('cell-mouse-enter',evt)"
|
|
>
|
|
<el-table-column type="expand" v-if="slight && slight[0]">
|
|
<template slot-scope="scope">
|
|
<el-descriptions :column="1" style="margin: 0 20px;">
|
|
<el-descriptions-item v-for="(item, index) in getDataList(scope.row)" :label="item.label" :key="index">{{item.value}}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</template>
|
|
</el-table-column>
|
|
<slot name="default">
|
|
</slot>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ["data", "major","border","height"],
|
|
data() {
|
|
return {
|
|
mainCol: this.major,
|
|
rows: null,
|
|
showTable: true,
|
|
refreshing: false,
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
getDataList(row) {
|
|
return Object.keys(row)
|
|
.filter((key) => this.slight.some((s) => s.prop == key)).map((key) => {
|
|
return {
|
|
label: this.slight.find((s) => s.prop == key).label,
|
|
value: row[this.slight.find((s) => s.prop == key).prop],
|
|
};
|
|
});
|
|
},
|
|
initData() {
|
|
let length = this.$slots.default.length, rows = this.$slots.default;
|
|
// if (window.innerWidth < 768) { //判断PDA
|
|
if (!this.major || !this.major[0]) { //如果没有指定重要的列，默认第一列（一般是名称）和最后一列（一般是操作）
|
|
this.mainCol = [rows[0].componentOptions.propsData.prop,rows[length-1].componentOptions.propsData.prop]
|
|
}
|
|
this.slight = rows.filter((item) => { //筛选不重要的列，展示到expand中
|
|
return !(this.mainCol.some((main) => {
|
|
return main == item.componentOptions.propsData.prop;
|
|
}));
|
|
}).map((item) => {
|
|
return item.componentOptions.propsData;
|
|
});
|
|
this.rows = rows.filter((item) => { //去掉不重要的列
|
|
return this.mainCol.some((main) => {
|
|
return main == item.componentOptions.propsData.prop;
|
|
}) || !item.componentOptions.propsData.prop;
|
|
});
|
|
this.$slots.default = this.rows;
|
|
// }
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.initData();
|
|
},
|
|
updated() {
|
|
if (!this.refreshing) {
|
|
this.refreshing = true;
|
|
this.showTable = false;
|
|
} else{
|
|
setTimeout(()=> {
|
|
this.showTable = true;
|
|
this.initData();
|
|
},0)
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
|
|
::v-deep th.el-table__cell {
|
|
background: #0ECD4916 !important;
|
|
font-family: PingFangSC-Medium;
|
|
// font-size: 16px;
|
|
color: #323233;
|
|
line-height: 22px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
::v-deep .el-table__cell {
|
|
padding: 8px !important;
|
|
}
|
|
</style> |