console
var Main = {
data() {
return {
depts: ["1", "2", "3"],
tableData: [
{"id":10001,"name":"广伟才","extral":"一些额外的信息","dept":"A1"},
{"id":10002,"name":"石飞翮","extral":"一些额外的信息","dept":"A1"},
{"id":10004,"name":"户怀曼","extral":"一些额外的信息","dept":"A1"},
{"id":100012,"name":"相新荣","extral":"一些额外的信息","dept":"A1"},
{"id":100013,"name":"贝云水","extral":"一些额外的信息","dept":"A1"},
{"id":10003,"name":"赤从蓉","extral":"一些额外的信息","dept":"A2"},
{"id":10005,"name":"六丝","extral":"一些额外的信息","dept":"A2"},
{"id":10006,"name":"豆端","extral":"一些额外的信息","dept":"A2"},
{"id":10007,"name":"竭雁梅","extral":"一些额外的信息","dept":"A2"},
{"id":100011,"name":"宾鸿文","extral":"一些额外的信息","dept":"A2"},
{"id":100010,"name":"陶经纬","extral":"一些额外的信息","dept":"A3"},
{"id":10008,"name":"丑玉宇","extral":"一些额外的信息","dept":"A3"},
{"id":10009,"name":"城修德","extral":"一些额外的信息","dept":"A3"}
],
mergeCells: [
{ row: 0, col: 0, rowspan: 1, colspan: 1 },
{ row: 0, col: 1, rowspan: 5, colspan: 1 },
{ row: 0, col: 2, rowspan: 1, colspan: 1 },
{ row: 0, col: 3, rowspan: 1, colspan: 1 },
{ row: 1, col: 0, rowspan: 1, colspan: 1 },
{ row: 1, col: 1, rowspan: 0, colspan: 1 },
{ row: 1, col: 2, rowspan: 1, colspan: 1 },
{ row: 1, col: 3, rowspan: 1, colspan: 1 },
{ row: 2, col: 0, rowspan: 1, colspan: 1 },
{ row: 2, col: 1, rowspan: 0, colspan: 1 },
{ row: 2, col: 2, rowspan: 1, colspan: 1 },
{ row: 2, col: 3, rowspan: 1, colspan: 1 },
{ row: 3, col: 0, rowspan: 1, colspan: 1 },
{ row: 3, col: 1, rowspan: 0, colspan: 1 },
{ row: 3, col: 2, rowspan: 1, colspan: 1 },
{ row: 3, col: 3, rowspan: 1, colspan: 1 },
{ row: 4, col: 0, rowspan: 1, colspan: 1 },
{ row: 4, col: 1, rowspan: 0, colspan: 1 },
{ row: 4, col: 2, rowspan: 1, colspan: 1 },
{ row: 4, col: 3, rowspan: 1, colspan: 1 },
{ row: 5, col: 0, rowspan: 1, colspan: 1 },
{ row: 5, col: 1, rowspan: 5, colspan: 1 },
{ row: 5, col: 2, rowspan: 1, colspan: 1 },
{ row: 5, col: 3, rowspan: 1, colspan: 1 },
{ row: 6, col: 0, rowspan: 1, colspan: 1 },
{ row: 6, col: 1, rowspan: 0, colspan: 1 },
{ row: 6, col: 2, rowspan: 1, colspan: 1 },
{ row: 6, col: 3, rowspan: 1, colspan: 1 },
{ row: 7, col: 0, rowspan: 1, colspan: 1 },
{ row: 7, col: 1, rowspan: 0, colspan: 1 },
{ row: 7, col: 2, rowspan: 1, colspan: 1 },
{ row: 7, col: 3, rowspan: 1, colspan: 1 },
{ row: 8, col: 0, rowspan: 1, colspan: 1 },
{ row: 8, col: 1, rowspan: 0, colspan: 1 },
{ row: 8, col: 2, rowspan: 1, colspan: 1 },
{ row: 8, col: 3, rowspan: 1, colspan: 1 },
{ row: 9, col: 0, rowspan: 1, colspan: 1 },
{ row: 9, col: 1, rowspan: 0, colspan: 1 },
{ row: 9, col: 2, rowspan: 1, colspan: 1 },
{ row: 9, col: 3, rowspan: 1, colspan: 1 },
{ row: 10, col: 0, rowspan: 1, colspan: 1 },
{ row: 10, col: 1, rowspan: 3, colspan: 1 },
{ row: 10, col: 2, rowspan: 1, colspan: 1 },
{ row: 10, col: 3, rowspan: 1, colspan: 1 },
{ row: 11, col: 0, rowspan: 1, colspan: 1 },
{ row: 11, col: 1, rowspan: 0, colspan: 1 },
{ row: 11, col: 2, rowspan: 1, colspan: 1 },
{ row: 11, col: 3, rowspan: 1, colspan: 1 },
{ row: 12, col: 0, rowspan: 1, colspan: 1 },
{ row: 12, col: 1, rowspan: 0, colspan: 1 },
{ row: 12, col: 2, rowspan: 1, colspan: 1 },
{ row: 12, col: 3, rowspan: 1, colspan: 1 },
]
}
},
methods: {
printTableData() {
let { fullData } = this.$refs.xTable.getTableData();
console.log("full data: ", fullData);
let updatedData = this.$refs.xTable.getUpdateRecords();
console.log("updated data: ", updatedData);
},
handleEditClose({ row, column }) {
if(column.property === "role") {
let lastValue = column.model.value;
let newValue = row[column.property];
console.log("last: ", lastValue, ", new: ", newValue);
this.tableData.forEach(item => {
if(item[column.property] === lastValue) {
item[column.property] = newValue;
}
});
}
}
}
};
var app = new Vue(Main).$mount('#app')
<script src="https://unpkg.com/vue@2.6.0">
</script>
<script src="https://unpkg.com/xe-utils">
</script>
<script src="https://unpkg.com/vxe-table@3">
</script>
<div id="app">
<template>
<div>
<span>部门: </span>
<vxe-select v-model="depts" placeholder="多选" multiple>
<vxe-option value="1" label="A1"></vxe-option>
<vxe-option value="2" label="A2"></vxe-option>
<vxe-option value="3" label="A3"></vxe-option>
<vxe-option value="4" label="A4"></vxe-option>
<vxe-option value="5" label="A5"></vxe-option>
</vxe-select>
<vxe-button status="primary">查询</vxe-button>
<br>
<br>
<vxe-table border show-overflow ref="xTable" :merge-cells="mergeCells" :data="tableData">
<vxe-column type="checkbox" width="60"></vxe-column>
<vxe-column field="dept" title="部门"></vxe-column>
<vxe-column field="name" title="姓名"></vxe-column>
<vxe-column field="extral" title="扩展信息"></vxe-column>
</vxe-table>
</div>
</template>
</div>
@import url("https://unpkg.com/vxe-table/lib/style.css");
h2 {
margin: 0;
}
p {
margin: 0;
}