<template>
<div class="transfer-container">
<!-- 左侧表格 -->
<div class="table-container">
<div class="header">
<div class="title">设备列表</div>
<div class="select-box"></div>
</div>
<div class="table-box">
<a-table
:row-selection="{
selectedRowKeys: leftSelectedKeys,
onChange: onLeftSelectChange
}"
:columns="leftColumns"
:data-source="leftData"
row-key="id"
:scroll="{ x: '100%', y: 220 }"
:pagination="false"
>
<template slot="operation" slot-scope="text, record">
<span style="color: #41c1f1; cursor: pointer" v-if="record.isExist" @click="openDetail(record)">
已存在
</span>
<span v-else>{{ '--' }}</span>
</template>
</a-table>
</div>
</div>
<!-- 中间操作按钮 -->
<div class="transfer-actions">
<a-
button type="primary" icon="right" :
disabled="leftSelectedKeys.length === 0" @click="moveToRight"> </a-
button>
</div>
<!-- 右侧表格 -->
<div class="table-container">
<div class="header">
<a-
button type="primary" :
disabled="rightSelectedKeys.length === 0" @click="moveToLeft"> 清除 </a-
button>
<div class="count">
{{ $t('已选: ') + rightSelectedKeys.length }}
</div>
</div>
<div class="table-box">
<a-table
:row-selection="{
selectedRowKeys: rightSelectedKeys,
onChange: onRightSelectChange
}"
:columns="rightColumns"
:scroll="{ x: '100%', y: 220 }"
:dataSource="rightData"
row-key="id"
:pagination="false"
>
</a-table>
</div>
</div>
<myModal
:params="{ title: '定时任务已存在', showFooter: false }"
:visible="visible"
@cancel="visible = false"
destroyOnClose
>
<template v-slot:header><span></span></template>
<template v-slot:body>
<a-table
:columns="detailColumns"
:scroll="{ x: '100%', y: 400 }"
:dataSource="detailData"
row-key="id"
:pagination="false"
>
</a-table>
</template>
</myModal>
</div>
</template>
<script>
import myModal from '@/components/scfComponents/modalComponents/modal.vue'
export default {
components: { myModal },
data() {
// 公共列
const commonColumns = [
{
title: '设备名称',
dataIndex: 'deviceName',
key: 'deviceName',
ellipsis: true
},
{
title: '探测器名称',
dataIndex: 'detectorName',
key: 'detectorName',
ellipsis: true
},
{
title: '探测器型号',
dataIndex: 'detectorModel',
key: 'detectorModel',
ellipsis: true
},
{
title: '探测器编号',
dataIndex: 'detectorNumber',
key: 'detectorNumber',
ellipsis: true
}
]
return {
visible: false,
// 左侧表头
leftColumns: [
...commonColumns,
{
title: '定时任务',
dataIndex: 'operation',
key: 'operation',
scopedSlots: { customRender: 'operation' }
}
],
// 右侧表头
rightColumns: [
...commonColumns,
{
title: '所属组织',
dataIndex: 'operation',
key: 'operation'
}
],
// 详情表头
detailColumns: [
{
title: '探测器名称',
dataIndex: 'name',
key: 'name',
ellipsis: true
},
{
title: '日期',
dataIndex: 'date',
key: 'date',
ellipsis: true
},
{
title: '时间',
dataIndex: 'time',
key: 'time',
ellipsis: true
},
{
title: '空开操作',
dataIndex: 'operation',
key: 'operation'
}
],
// 初始数据
originalData: [
{ id: 1, deviceName: '张三', age: 25, department: '技术部', isExist: false },
{ id: 2, deviceName: '李四', age: 30, department: '市场部', isExist: true },
{ id: 3, deviceName: '王五', age: 28, department: '财务部', isExist: true },
{ id: 4, deviceName: '赵六', age: 32, department: '人事部', isExist: true },
{ id: 5, deviceName: '钱七', age: 26, department: '技术部', isExist: true },
{ id: 6, deviceName: '钱七', age: 26, department: '技术部', isExist: false },
{ id: 7, deviceName: '钱七', age: 26, department: '技术部', isExist: false },
{ id: 8, deviceName: '钱七', age: 26, department: '技术部', isExist: false },
{ id: 9, deviceName: '钱七', age: 26, department: '技术部', isExist: false }
],
// 左侧表格数据
leftData: [],
// 右侧表格数据
rightData: [],
// 左侧选中项
leftSelectedKeys: [],
// 右侧选中项
rightSelectedKeys: []
}
},
computed: {},
created() {
// 初始化数据
this.resetData()
},
methods: {
// 初始化数据
resetData() {
this.leftData = [...this.originalData]
this.rightData = []
this.leftSelectedKeys = []
this.rightSelectedKeys = []
},
// 向左移动选中项
moveToLeft() {
const selectedItems = this.rightData.filter(item => this.rightSelectedKeys.includes(item.id))
// 从右侧移除
this.rightData = this.rightData.filter(item => !this.rightSelectedKeys.includes(item.id))
// 添加到左侧
this.leftData = [...this.leftData, ...selectedItems]
// 重置选中状态
this.rightSelectedKeys = []
},
// 向右移动选中项
moveToRight() {
const selectedItems = this.leftData.filter(item => this.leftSelectedKeys.includes(item.id))
// 从左侧移除
this.leftData = this.leftData.filter(item => !this.leftSelectedKeys.includes(item.id))
// 添加到右侧
this.rightData = [...this.rightData, ...selectedItems]
// 重置选中状态
this.leftSelectedKeys = []
},
// 左侧选择变化
onLeftSelectChange(selectedKeys) {
this.leftSelectedKeys = selectedKeys
},
// 右侧选择变化
onRightSelectChange(selectedKeys) {
this.rightSelectedKeys = selectedKeys
},
openDetail() {
this.visible = true
}
}
}
</script>
<style lang="less" scoped>
.transfer-container {
width: 100%;
display: flex;
justify-content: space-around;
margin-top: 40px;
box-sizing: border-box;
}
.table-container {
width: 48%;
height: 100%;
.header {
height: 44px;
width: 100%;
display: flex;
align-items: center;
margin-bottom: 12px;
justify-content: space-between;
}
// .table-box {
// width: 100%;
// height: calc(100% - 56px);
// }
}
.transfer-actions {
margin-top: 56px;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
已存在的禁止选中
博客指出a链接使用disabled属性无效，为达到预期效果，最好使用button来替代a链接。
扫一扫
851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
