SOURCE

console 命令行工具 X clear

                    
>
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;
}