效果图
代码
弹窗代码
<!-- 弹窗组件 -->
<el-dialog title="选择设备" :visible.sync="dialogVisible" width="50%">
<div class="table-container">
<div style="display: flex; gap: 20px; overflow: auto">
<small style="width: 10%; margin-top: 17px; margin-left: 20px">
设备名称:</small
>
<el-input
v-model="query.searchQuery"
placeholder="搜索设备"
style="margin-bottom: 20px; margin-top: 10px; width: 30%"
/><span style="margin-top: 20px"
>已选择{{ this.query.selectedData.length }}台设备</span
>
</div>
<div
style="display: flex; gap: 20px; height: 300px; overflow: auto"
>
<!-- 第一个表格,显示所有数据 -->
<el-table
ref="myTable"
:data="filteredData"
@select-all="handleSelectAll"
@selection-change="handleSelectionChange"
style="width: 50%; margin-left: 50px"
>
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column
prop="deviceName"
label="设备名称"
width="150"
>
</el-table-column>
</el-table>
<!-- 第二个表格,显示选中的数据 -->
<el-table
:data="query.selectedData"
style="width: 50%; margin-left: 50px"
>
<el-table-column
prop="deviceName"
label="设备名称"
width="150"
>
</el-table-column>
<el-table-column label="操作" min-width="50" >
<template slot-scope="{ row }">
<el-button
type="danger"
icon="el-icon-delete"
@click="removeDevice(row.deviceId)"
circle
></el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="confirmSelection"
>确定</el-button
>
</div>
</el-dialog>
js代码
data() {
return {
dialogVisible: false,
msg: "未选择设备,默认查询全部设备",
query:{
ids: [],
count: 10,
startTempTime: "",
searchQuery: "",
selectedData: [],
}
}
},
computed: {
filteredData() {
return this.list.filter((item) =>item.deviceName.includes(this.query.searchQuery)
);
},
},
methods: {
handleSelectAll(selection) {
if (selection.length == 0 && this.query.searchQuery == "") {
// this.query.selectedData=[]
this.query.selectedData = [];
return;
}
console.log("全选操作,当前选中的所有行:", selection);
},
// 监听第一个表格的选择事件
handleSelectionChange(selection) {
if (selection.length == 0 && this.query.searchQuery == "") {
if (this.query.selectedData.length == 1) {
this.query.selectedData = [];
}
this.restoreSelection();
return;
}
if (
selection.length == 0 &&
this.query.searchQuery != "" &&
this.query.selectedData.length > 0
) {
this.restoreSelection();
return;
}
// 获取 filteredData 中不在 selection 中的元素
const difference1 = this.filteredData.filter(
(x) => !selection.includes(x)
);
const set = new Set(this.query.selectedData);
// this.query.selectedData = selection;
var ids = [];
selection.forEach((element) => {
ids.push(element.deviceId);
set.add(element);
});
var newList = Array.from(set);
this.query.selectedData = newList.filter((x) => !difference1.includes(x));
this.restoreSelection();
this.query.ids = ids;
},
// 确认选择
confirmSelection() {
if (this.query.selectedData.length != 0) {
this.msg = "已选择" + this.query.selectedData.length + "台设备";
}
this.dialogVisible = false;
},
removeDevice(deviceId) {
this.query.selectedData = this.query.selectedData.filter(
(row) => row.deviceId !== deviceId
);
const row = this.filteredData.find((row) => row.deviceId === deviceId);
if (row) {
this.$refs.myTable.toggleRowSelection(row, false); // 取消选中
}
},
restoreSelection() {
this.$nextTick(() => {
this.query.selectedData.forEach((row) => {
this.$refs.myTable.toggleRowSelection(row, true);
});
});
},
}
(小小的说明一下,我不是专门搞前端的,前端水平有限,就是需要实现这个功能,但是没找到满足需求的,就只能自己写啦,可能写的一坨哈哈哈哈,但是还是满足需求了,需要的话可以参考一下下哈哈哈哈)