【无标题】穿梭框

最新推荐文章于 2022-08-09 16:19:20 发布

坐观云起笑看风

最新推荐文章于 2022-08-09 16:19:20 发布

阅读量314

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_51501174/article/details/122195567

版权

该博客展示了如何在Vue.js应用程序中使用Ant Design Vue库来实现穿梭框（Transfer）组件。内容包括根据不同的数据类型（品名或二级单位）进行搜索、筛选和数据加载，并提供了穿梭框的事件处理，如数据变更时的回调函数。此外，还涉及了复选框选择功能的实现，以及搜索和重置按钮的操作逻辑。

摘要由CSDN通过智能技术生成

<div class="" v-if="dataType == 'staName'">
<a-transfer :data-source="sourceData" :target-keys="targetKeys" :show-select-all="false" :locale="{itemUnit: '项', itemsUnit: '项',}" @change="onChange" :rowKey="record => record.staName">
<template slot="children" slot-scope="{
props: { direction, filteredItems, selectedKeys },
on: { itemSelectAll, itemSelect },
}"
>
<a-table
bordered
:row-selection="getRowSelection({ selectedKeys, itemSelectAll, itemSelect })"
:columns="direction === 'left' ? leftColumns : rightColumns"
rowKey="staName"
:locale="{emptyText: '暂无数据'}"
:data-source="filteredItems"
size="small"
:custom-row="
({ staName }) => ({
on: {
click: () => {
itemSelect(staName, !selectedKeys.includes(staName));
},
},
})
"
/>
</template>
</a-transfer>
</div>

<div class="" v-else-if="dataType == 'deptName'">
<a-transfer :data-source="sourceData" :target-keys="targetKeys" :show-select-all="false" :locale="{itemUnit: '项', itemsUnit: '项',}" @change="onChange" :rowKey="record => record.deptId">
<template slot="children" slot-scope="{
props: { direction, filteredItems, selectedKeys },
on: { itemSelectAll, itemSelect },
}"
>
<a-table
bordered
:row-selection="getRowSelectionDept({ selectedKeys, itemSelectAll, itemSelect })"
:columns="direction === 'left' ? leftColumns : rightColumns"
rowKey="deptId"
:locale="{emptyText: '暂无数据'}"
:data-source="filteredItems"
size="small"
:custom-row="
({ deptId }) => ({
on: {
click: () => {
itemSelect(deptId, !selectedKeys.includes(deptId));
},
},
})
"
/>
</template>
</a-transfer>
</div>

//获取表格数据
getList(){
//品名
if(this.dataType == 'staName'){
this.sourceData = [];
request({
url: this.staUrl,
method: 'get',
params: this.queryParams
}).then(response =>{
this.sourceData = response.data;
})
}else if(this.dataType == 'deptName'){
this.getHaveDeptNameList();
}
},

//获取类别列表
getCategory(){
this.sourceData = [];
getDicts("standard_category").then(res=>{
let data = res.data
data.forEach(item=>{
let obj={}
obj.dictLabel= item.dictLabel
obj.dictCode=item.dictValue
this.categoryList.push(obj)
})
})
},

//获取二级单位列表
getHaveDeptNameList(){
this.sourceData = [];
request({
url: this.deptUrl,
method: 'get',
params: this.queryParamsDept
}).then((res) => {
let data = res.data;
data.forEach((item) => {
let obj = {};
obj.deptId = item.deptId;
obj.deptName = item.deptName;
this.sourceData.push(obj);
});
});
},

//穿梭框数据变化时
onChange(nextTargetKeys) {
this.nextTargetKeys = nextTargetKeys;
this.$emit('changeTargetKeys',nextTargetKeys)
},

//提交设置的数据
submit(){
// TODO 更新统计图显示内容
this.$emit('updateEcharts',this.nextTargetKeys);
this.$emit('close',false)
},

//取消提交
cancelSubmit() {
this.$emit('close',false)
},

//复选框勾选---品名
getRowSelection({ selectedKeys, itemSelectAll, itemSelect }) {
return {
onSelectAll(selected, selectedRows) {
const treeSelectedKeys = selectedRows.map(({ staName }) => staName);
const diffKeys = selected ? treeSelectedKeys : selectedKeys;
itemSelectAll(diffKeys, selected);
},
onSelect({ staName }, selected) {
itemSelect(staName, selected);
},
selectedRowKeys: selectedKeys,
};
},

//复选框勾选---二级单位
getRowSelectionDept({ selectedKeys, itemSelectAll, itemSelect }) {
return {
onSelectAll(selected, selectedRows) {
const treeSelectedKeys = selectedRows.map(({ deptId }) => deptId);
const diffKeys = selected ? treeSelectedKeys : selectedKeys;
itemSelectAll(diffKeys, selected);
},
onSelect({ deptId }, selected) {
itemSelect(deptId, selected);
},
selectedRowKeys: selectedKeys,
};
},
}
}
</script>

坐观云起笑看风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】穿梭框

<template> <div> <div class="searchBox" v-if="dataType == 'staName'"> <el-form :model="queryParams" ref="queryForm" :inline="true"> <el-form-item label="品名" prop="staName"> &...
复制链接

扫一扫