Vue中使用Transfer实现表格穿梭框（可搜索）

需求：使用Transfer实现带分页并可搜索的穿梭框。给不同用户分配不同的应用服务。

前端

1.注册组件（main.js）

import {  Transfer, Table, Switch } from 'ant-design-vue'
Vue.use(Transfer)
Vue.use(Table)
Vue.use(Switch)

2.Transfer中使用 Table 组件自定义渲染列表

这里用的是eladmin-ui中的el-dialog，以点击按钮的方式弹出穿梭框

2.1 自定义渲染列表

<el-dialog v-if="transferVisible" append-to-body :close-on-click-modal="false" :visible.sync="transferVisible" width="1000px" @before-close="transferClose"><div><a-transfer:data-source="mockData":target-keys="targetKeys":show-search="true":filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1":show-select-all="false"@change="onChange"><templateslot="children"slot-scope="{props: { direction, filteredItems, selectedKeys, disabled: listDisabled },on: { itemSelectAll, itemSelect },}"><a-table:row-selection="getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })":columns="direction === 'left' ? leftColumns : rightColumns":data-source="filteredItems"size="small":style="{ pointerEvents: listDisabled ? 'none' : null }":custom-row="({ key, disabled: itemDisabled }) => ({on: {click: () => {if (itemDisabled || listDisabled) return;itemSelect(key, !selectedKeys.includes(key));},},})"/></template></a-transfer></div><div slot="footer"><el-button type="text" @click="transferClose">取消</el-button><el-button type="primary" @click="transferSub">提交</el-button></div>
</el-dialog>

2.2 定义变量

const mockData = []
const originTargetKeys = []
const leftTableColumns = [{dataIndex: 'title',title: '应用名称'},{dataIndex: 'description',title: '服务名称'}
]
const rightTableColumns = [{dataIndex: 'title',title: '应用名称'}
]
data(){return {transferVisible: false,mockData,targetKeys: originTargetKeys,disabled: false,showSearch: false,leftColumns: leftTableColumns,rightColumns: rightTableColumns,
}

2.3 回调函数

onChange(nextTargetKeys) {this.targetKeys = nextTargetKeys
},
getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {return {getCheckboxProps: item => ({ props: { disabled: disabled || item.disabled }}),onSelectAll(selected, selectedRows) {const treeSelectedKeys = selectedRows.filter(item => !item.disabled).map(({ key }) => key)const diffKeys = selected? difference(treeSelectedKeys, selectedKeys): difference(selectedKeys, treeSelectedKeys)itemSelectAll(diffKeys, selected)},onSelect({ key }, selected) {itemSelect(key, selected)},selectedRowKeys: selectedKeys}
}

3.加载渲染数据

3.1 渲染mockData（左边数据）

这里页面加载就获取全部数据并渲染mockData

created() {this.initAppData()
},
methods: {initAppData() {getAppAll().then(res => {if (res.data && res.data.length > 0) {this.mockData = res.data.map(item => {return {key: item.appid,title: item.appName || '暂无',description: item.serviceName || '暂无',disabled: false}})}}).catch(() => { })}
}

这里getAppAll()的后台接口就不贴出来了，就是简单地获取List。

3.2 加载用户数据（右边数据）

queryListByUserId：根据不同的用户Id获取对应的应用List<Id>；后台实现见下面后端代码。

// 分配App
allot(rowData) {this.transferVisible = truethis.userId = rowData.idqueryListByUserId({ userId: rowData.id }).then(response => {mockData.filter(item => response.indexOf(item.key) > 0).map(item => item.key)this.targetKeys = response}).catch(() => { })
},
// 关闭穿梭框
transferClose() {this.transferVisible = false
}

后端

1.关联表

建立用户和应用的关联表

2.查询关联数据

自己实现对应的查询逻辑，这里只贴Service代码

/*** 根据用户ID查询App信息* @param userId* @return*/
List<String> queryListByUserId(String userId);

3.提交绑定

前端提交按钮事件：

transferSub() {addUserApps({ userId: this.userId.toString(), appIds: this.targetKeys }).then(res => {this.$notify({title: '提交成功',type: 'success',duration: 2500})this.transferVisible = false}).catch((err) => {this.$notify({title: '提交失败' + err,type: 'error',duration: 2500})})
}

后端提交逻辑（因本人比较懒，采用的是先删除再添加的懒人方法）

public Result addUserApps(@RequestBody UsersAppsVo usersAppsVo){// 先删除usersAppsService.delAppsByUserId(usersAppsVo.getUserId());// 再插入usersAppsService.addUserApps(usersAppsVo.getAppIds(),usersAppsVo.getUserId());return  Result.ok();
}

效果图：

Vue中使用Transfer实现表格穿梭框（可搜索）相关推荐

在vue项目中使用树形结构的穿梭框
先看一下最后的效果: 一个基于elementui的穿梭框组件:el-tree-transfer 第一步:安装组件 npm install el-tree-transfer --save 第二步:写代码 ...
vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
vue中手机端点击手机键盘的完成 / 搜索按钮触发文本框搜索
看到标题,你可能第一反应是想着监听手机键盘的[完成]或[搜索]按钮,然后触发事件do something but ,No No No ,没有那么艰难复杂. vue中,要在手机端点击手机键盘的[完成]或 ...
＜在Vue中 el-popover + el-tiptap 实现富文本框输入，表格点击展示（富文本HTML标签渲染）＞
文章目录
vue中如何使用wangEditor 富文本框
在做后台管理项目时常常会用到富文本编辑器,在这里推荐大家使用wangEditor,亲测好用话不多说先上图第一步安装 npm wangeditor --save 第二步在项目中使用先建立一个wan ...
Vue中手动导出Element表格为pdf/word/excel格式
在vue中将element的表格进行导出为pdf/word/excel样式,需要进行一些处理,比较麻烦网页样式导出为表格导出为word 导出为PDF 一.编写工具函数和前置对element样式的 ...
vue中导出csv格式表格
这是页面这是最终csv格式导出表挺简单的,读完此篇文章约3分钟,学会使用约2分钟首先介绍一下我用的插件**## csv-exportor**安装命令npm install --save csv- ...
php穿梭框多选,多选穿梭框总结（vue + element）
示例介绍实现省市区三级多选联动,可任选一个省级.市级.区级,加入已选框,也可以在已选框中删除对应的区域. 选择对应仓库,自动勾选仓库对应的省,取消就反选选择同样地区,选择省级或市级,若该对象下面 ...
教你从零写vue穿梭框
教你从零写vue穿梭框 1. 前言 2. 制作选择组件(select-input) 2. 制作vue穿梭框组件(table-transfer) 4. 将选择组件和穿梭框组件结合使用 4.1 点击选择组 ...

Vue中使用Transfer实现表格穿梭框（可搜索）

Vue中使用Transfer实现表格穿梭框（可搜索）

前端

1.注册组件（main.js）

2.Transfer中使用 Table 组件自定义渲染列表

2.1 自定义渲染列表

2.2 定义变量

2.3 回调函数

3.加载渲染数据

3.1 渲染mockData（左边数据）

3.2 加载用户数据（右边数据）

后端

1.关联表

2.查询关联数据

3.提交绑定

Vue中使用Transfer实现表格穿梭框（可搜索）相关推荐

最新文章

热门文章