<template>
|
<el-table
|
ref="multipleTable"
|
v-loading="tableLoading"
|
:data="tableData"
|
element-loading-text="拼命加载中"
|
:height="elementHeight"
|
:key='elementHeight'
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(255, 255, 255, 0.2)"
|
tooltip-effect="dark"
|
style="width: 100%"
|
border
|
:row-class-name="rowClassName"
|
:header-cell-style="headerCellStyle"
|
stripe
|
cell-class-name="cellClassName"
|
:row-key="isTree ? rowKey : ''"
|
@expand-change="expandChange"
|
@select="selectchange"
|
@select-all="selectAll"
|
>
|
<template v-if="isSelection">
|
<el-table-column type="selection" width="55" />
|
</template>
|
|
<template v-for="(item, index) in column">
|
<el-table-column
|
:key="index"
|
:label="item.label"
|
:prop="item.prop"
|
:type="item.type"
|
:width="item.width"
|
:fixed="item.fixed"
|
:sortable="item.sortable ? true : false"
|
:filters="item.filters"
|
:column-key="item.columnKey"
|
:filtered-value="item.filteredValue"
|
:filter-multiple="item.filterMultiple"
|
:min-width="item.minWidth"
|
:align="item.align"
|
:show-overflow-tooltip="true"
|
>
|
<!-- <div class="123" v-if="item.type == ''"> -->
|
<template
|
v-if="item.hasOwnProperty('colunmTemplate')"
|
:slot="item.colunmTemplate"
|
slot-scope="scope"
|
>
|
<slot
|
v-if="item.theadSlot"
|
:name="item.theadSlot"
|
:row="scope.row"
|
:index="index"
|
/>
|
</template>
|
|
<template slot-scope="scope">
|
<!-- 插槽 -->
|
<div v-if="item.dataType == 'slot'">
|
<slot
|
v-if="item.slot"
|
:name="item.slot"
|
:row="scope.row"
|
:index="scope.$index"
|
/>
|
</div>
|
|
<!-- 进度条 -->
|
<div v-else-if="item.dataType == 'progress'">
|
<el-progress :percentage="Number(scope.row[item.prop])" />
|
</div>
|
|
<!-- tag -->
|
<div v-else-if="item.dataType == 'tag'">
|
<el-tag
|
v-if="
|
typeof dataTypeFn(scope.row[item.prop], item.formatData) ==
|
'string'
|
"
|
:title="scope.row[item.prop] | formatters(item.formatData)"
|
:type="formatType(scope.row[item.prop], item.formatType)"
|
>
|
{{ scope.row[item.prop] | formatters(item.formatData) }}
|
</el-tag>
|
|
<el-tag
|
v-for="(tag, index) in dataTypeFn(
|
scope.row[item.prop],
|
item.formatData
|
)"
|
v-else-if="
|
typeof dataTypeFn(scope.row[item.prop], item.formatData) ==
|
'object'
|
"
|
:key="index"
|
:title="scope.row[item.prop] | formatters(item.formatData)"
|
:type="formatType(tag, item.formatType)"
|
>
|
{{
|
item.tagGroup
|
? tag[item.tagGroup.label]
|
? tag[item.tagGroup.label]
|
: tag
|
: tag
|
}}
|
</el-tag>
|
|
<el-tag
|
v-else
|
:title="scope.row[item.prop] | formatters(item.formatData)"
|
:type="formatType(scope.row[item.prop], item.formatType)"
|
>
|
{{ scope.row[item.prop] | formatters(item.formatData) }}
|
</el-tag>
|
</div>
|
|
<!-- 按钮 -->
|
<div v-else-if="item.dataType == 'option'">
|
<template >
|
<el-button
|
v-for="(o, key) in item.operation"
|
v-show="o.showHide ? o.showHide(scope.row) : true"
|
:key="key"
|
:icon="o.icon | iconFn(scope.row)"
|
:disabled="o.disabled ? o.disabled(scope.row) : false"
|
:plain="o.plain"
|
:type="o.type | typeFn(scope.row)"
|
:size="o.size"
|
@click="clickFun(scope.row, o.typeText)"
|
v-hasPermi="[o.hasPermi]"
|
>
|
{{ o.name }}
|
|
</el-button>
|
</template>
|
</div>
|
|
<!-- -->
|
|
<!-- 默认纯展示数据 -->
|
<span v-else>
|
<span class="overClass" v-if="!item.formatData">
|
{{ scope.row[item.prop] }}
|
</span>
|
<span class="overClass" v-else>
|
{{ scope.row[item.prop] | formatters(item.formatData) }}
|
</span>
|
</span>
|
</template>
|
|
<!-- </div> -->
|
</el-table-column>
|
</template>
|
</el-table>
|
</template>
|
|
<script>
|
export default {
|
filters: {
|
iconFn(val, row) {
|
if (typeof val === "function") {
|
return val(row);
|
} else return val;
|
},
|
typeFn(val, row) {
|
if (typeof val === "function") {
|
return val(row);
|
} else return val;
|
},
|
describeConts(val, describeCont) {
|
if (typeof describeCont === "function") {
|
return describeCont(val);
|
} else return val;
|
},
|
formatters(val, format) {
|
if (typeof format === "function") {
|
return format(val);
|
} else return val;
|
},
|
},
|
props: {
|
// 是否开启多选
|
isSelection: {
|
type: Boolean,
|
default: false,
|
},
|
// 设置表格高度
|
height: {
|
type: Number|String,
|
default: null,
|
},
|
// 表格数据请求loading
|
tableLoading: {
|
type: Boolean,
|
default: false,
|
},
|
// 表格头部样式
|
headerCellStyle: {
|
type: Object,
|
default: () => {
|
return {};
|
},
|
},
|
// 列数据表头
|
column: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
// 行数据类名
|
rowClassName: {
|
type: Function,
|
default: () => {},
|
},
|
// 表格数据
|
tableData: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
// 在是树状表格时需要使用rowKey默认不使用
|
isTree: {
|
type: Boolean,
|
default: false,
|
},
|
// 表格行绑定的id数据
|
rowKey: {
|
type: String,
|
default: "",
|
},
|
// chectype选项类
|
checktype: {
|
type: String,
|
default: "check",
|
},
|
},
|
computed: {
|
elementHeight() {
|
return this.height;
|
},
|
},
|
data() {
|
return {
|
expandedData: [],
|
multipleSelection: [],
|
isCheckedAll: false,
|
};
|
},
|
watch: {
|
multipleSelection(val, oldval) {
|
|
this.setIsCheckedAll(val);
|
this.$emit("checkData", val);
|
},
|
|
tableLoading() {
|
this.multipleSelection = [];
|
},
|
|
elementHeight(){
|
|
this.multipleSelection = [];
|
}
|
},
|
mounted() {},
|
methods: {
|
formatType(val, format) {
|
if (typeof format === "function") {
|
return format(val);
|
} else return "";
|
},
|
dataTypeFn(val, format) {
|
if (typeof format === "function") {
|
return format(val);
|
} else return val;
|
},
|
toggleSelection(row, type) {
|
this.$refs.multipleTable.toggleRowSelection(row, type);
|
},
|
clearSection(row) {
|
this.$refs.multipleTable.clearSelection();
|
},
|
// 选择的方法
|
// selectchange(selection, row) {
|
|
|
// if (this.checktype == "radio") {
|
// row.isChecked = true;
|
// if (this.multipleSelection.length < 0) {
|
// this.multipleSelection.push(row);
|
// } else {
|
// this.toggleSelection(this.multipleSelection[0],false)
|
|
// this.multipleSelection.splice(0, 1, row);
|
// }
|
// } else {
|
|
// if (!row.isChecked) {
|
// this.multipleSelection.push(row);
|
// row.isChecked = true;
|
// if (
|
// row.children &&
|
// this.expandedData.indexOf(row[this.rowKey]) > -1
|
// ) {
|
// row.children.map((item) => {
|
// this.toggleSelection(item, true);
|
// item.isChecked = true;
|
// this.multipleSelection.push(item);
|
// });
|
// }
|
// } else {
|
|
// row.isChecked = false;
|
// this.multipleSelection.splice(this.multipleSelection.indexOf(row), 1);
|
// if (row.children) {
|
// row.children.map((item) => {
|
|
// this.toggleSelection(item, false);
|
// item.isChecked = false;
|
// this.multipleSelection.splice(
|
// this.multipleSelection.indexOf(item),
|
// 1
|
// );
|
// });
|
// }
|
// }
|
// }
|
// },
|
selectchange(selection, row) {
|
|
if (this.checktype === "radio") {
|
row.isChecked = true;
|
if (this.multipleSelection.length < 0) {
|
this.multipleSelection.push(row);
|
} else {
|
this.toggleSelection(this.multipleSelection[0], false);
|
this.multipleSelection.splice(0, 1, row);
|
}
|
} else {
|
if (!row.isChecked) {
|
console.log('选择操作');
|
this.multipleSelection.push(row);
|
row.isChecked = true;
|
if (row.children && this.expandedData.includes(row[this.rowKey])) {
|
row.children.forEach((item) => {
|
this.toggleSelection(item, true);
|
item.isChecked = true;
|
this.multipleSelection.push(item);
|
});
|
}
|
} else {
|
console.log('取消选择操作');
|
row.isChecked = false;
|
this.removeSelectionAndChildren(row);
|
}
|
}
|
},
|
|
removeSelectionAndChildren(row) {
|
this.toggleSelection(row, false);
|
this.multipleSelection = this.multipleSelection.filter(item => item !== row);
|
if (row.children) {
|
row.children.forEach((child) => {
|
this.toggleSelection(child, false);
|
child.isChecked = false;
|
this.removeSelectionAndChildren(child); // 递归移除
|
});
|
}
|
},
|
// 数据行点击展开的方法
|
expandChange(record, expanded) {
|
if (expanded) {
|
this.expandedData.push(record[this.rowKey]);
|
} else {
|
this.expandedData = this.expandedData.filter(
|
(key) => key !== record[this.rowKey]
|
);
|
}
|
},
|
//树状表格全选
|
selectAll(selection) {
|
|
if (this.checktype == "check") {
|
this.isCheckedAll = !this.isCheckedAll;
|
if (this.isCheckedAll) {
|
this.$refs.multipleTable.data.map((items) => {
|
if (!items.isChecked) {
|
items.isChecked = true;
|
this.toggleSelection(items, true);
|
this.multipleSelection.push(items);
|
|
if (
|
this.expandedData.indexOf(items[this.rowKey]) > -1 &&
|
items.children
|
) {
|
items.children.map((item) => {
|
this.toggleSelection(item, true);
|
item.isChecked = true;
|
this.multipleSelection.push(item);
|
});
|
}
|
}
|
});
|
} else {
|
this.$refs.multipleTable.data.map((items) => {
|
this.toggleSelection(items, false);
|
items.isChecked = false;
|
if (items.children) {
|
items.children.map((item) => {
|
this.toggleSelection(item, false);
|
item.isChecked = false;
|
});
|
}
|
});
|
this.multipleSelection = [];
|
}
|
}else{
|
this.clearSection()
|
}
|
},
|
setIsCheckedAll(data) {
|
let num = 0;
|
|
let arrlist = this.$refs.multipleTable.data.map((item) => {
|
return item[this.rowKey];
|
});
|
if (data.length) {
|
data.forEach((item) => {
|
if (item.isChecked && arrlist.indexOf(item[this.rowKey]) > -1) {
|
num += 1;
|
}
|
});
|
if (num == this.$refs.multipleTable.data.length) {
|
this.isCheckedAll = true;
|
} else {
|
this.isCheckedAll = false;
|
}
|
} else {
|
this.isCheckedAll = false;
|
}
|
},
|
clickFun(info, type) {
|
switch (type) {
|
case 4:
|
this.$emit("checkLook", info);
|
break;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.overClass {
|
/* white-space: pre-wrap; */
|
width: 100% !important;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
/* .el-table .warning-row {
|
background: oldlace;
|
}
|
.el-table .success-row {
|
background: #f0f9eb;
|
} */
|
|
/* .app-container /deep/ .el-table, .el-table__expanded-cell {
|
background-color: transparent;
|
}
|
.app-container /deep/ .el-table tr {
|
background-color: transparent!important;
|
}
|
.app-container /deep/ .el-table--enable-row-transition .el-table__body td, .el-table .cell{
|
background-color: transparent;
|
} */
|
</style>
|
