Table列表复现框实现【勾选-搜索-再勾选】

概要

最近在开发时遇到一个问题，在进行表单渲染时，正常选中没有问题，单如果需要搜索选中时，一个是已选中的不会回填，二是在搜索的结果中进行选中，没有实现，经过排查，查找资料后实现。

例如：

整体架构流程

具体的实现效果
如下：

代码实现

<template><el-dialog:title="departmentUsersDialogTitle":visible.sync="departmentUsersDialogVisible"width="55%"@close="handleDepartmentUserDialog"><div class="dialog-content"><el-container><el-main class="user-group-content"><div class="user-group-panel"><div class="user-group-search"><el-inputv-model="searchUserValue"size="small"placeholder="请选择用户名称"@input="handleSearch"/></div><div class="user-group-table"><el-table  ref="userTableDataRef" size="small" :data="filteredData" style="width: 100%;height: 100%"@selection-change="handleSelectionChange":row-key="getRowKey"><el-table-column type="selection" width="55" :reserve-selection="true"/><el-table-column property="userName" label="姓名" width="120"><template #default="scope">{{scope.row.userName}}</template></el-table-column><el-table-column property="userCode" label="人员编码" width="120" /><el-table-column property="departmentName" label="所属部门" /></el-table></div></div></el-main><el-aside class="user-select-content"><div class="user-select-panel"><div class="user-select-title"><label>已选区</label></div><div><el-tag size="small" v-for="(userItem,userIndex) in departmentUsers" :key="userIndex" @close="handleCloseUserTag(userItem)" closable type="primary" style="margin: 5px">{{ userItem.userName}}</el-tag></div></div></el-aside></el-container></div><span slot="footer" class="dialog-footer"><el-button @click="handleDepartmentUserDialog"  size="small">取 消</el-button><el-button type="primary" @click="confirmDepartmentUserDialog" size="small">确 定</el-button></span></el-dialog>
</template>
<script>
import {getDepartmentUserApi} from "@/api";export default {name: "departmentUserDialog",props:{departmentUsersTitle:{type:String,required:true},departmentUserVisible:{type:Boolean,required:true},selectedDepartmentData:{type:Object,required:true},allDepartmentModel:{type:Array,required:true},},mounted() {const _that = this;_that.departmentUsersDialogTitle=_that.departmentUsersTitle;_that.departmentUsersDialogVisible=_that.departmentUserVisible;//选择的部门_that.selectedDepartment = _that.selectedDepartmentData;_that.departmentUsers=_that.selectedDepartmentData.users || [];_that.departmentThee = _that.allDepartmentModel;//初始化树节点_that.initializeUserData();},data(){return{departmentUsersDialogTitle:'',departmentUsersDialogVisible:false,searchDepartment:'',departmentThee:[],defaultProps: {children: 'children',label: 'label'},searchUserValue:'',userTableData:[],departmentUsers:[],selectedDepartment:{},// 初始时默认选中的节点defaultCheckedKeys: [],filteredData: [], // 过滤后的数据，用于显示//防止回显成功前对表格进行操作的标识,防止在调用toggleRowSelection方法改变选中状态，会调用@selection-change="handleSelectionChange"stopReBack: false,}},methods:{getRowKey(row) {return row.userId;},/*** 输入搜索**/handleSearch() {const _that = this;//过滤数据_that.filterUserData().then(() => {//初始化所选表单_that.setDefaultSelections();});},/*** 过滤用户数据*/filterUserData() {const _that = this;const searchUserValue = (_that.searchUserValue || '').toLowerCase();//过滤后的数据const searchTableData = _that.userTableData.filter(tableDta => {return (tableDta['userName'].toLowerCase()).includes(searchUserValue);}) || [];_that.filteredData = searchTableData;},/*** 初始化表单选中项*/setDefaultSelections() {// 遍历defaultSelectedIds，并找到对应的行来选中const _that=this;_that.stopReBack = true;_that.departmentUsers.forEach(user => {const row = _that.filteredData.find(row => row.userId === user.userId);if (row) {_that.$refs['userTableDataRef'].toggleRowSelection(row,true);}});_that.stopReBack = false;},/*** 初始化用户数据**/initializeUserData(){const _that = this;//初始化所选部门的用户_that.findDeptUser().then(() =>{_that.filteredData = _that.userTableData;//初始化所选表单_that.setDefaultSelections();})},/*** 部门树节点过滤** @param value* @param data* @returns {boolean}*/departmentFilterNode(value, data) {if (!value) return true;return data.label.indexOf(value) !== -1;},/*** 删除用户的Tag* @param userItem*/handleCloseUserTag(userItem){const _that = this;_that.departmentUsers.splice(_that.departmentUsers.indexOf(userItem), 1);_that.$refs['userTableDataRef'].toggleRowSelection(userItem,false);},/*** 确定弹框，*/confirmDepartmentUserDialog(){const _that = this;const selectData = _that.selectedDepartment;_that.$emit('actionDepartmentUsers', {distributeId:selectData.distributeId,distributeName:selectData.distributeName,users: _that.departmentUsers});},/*** 取消弹框，*/handleDepartmentUserDialog(){const _that = this;_that.$emit('closeDepartmentUsersDialog');},/*** 根据部门ID获取用户数据** @returns {Promise<void>}*/async findDeptUser() {const _that = this;const departmentJSON = _that.selectedDepartment || {};await getDepartmentUserApi({departmentId: departmentJSON['distributeId'] || '',}).then(res => {_that.userTableData = res.data || [];}).catch(err => {console.error('获取部门用户数据异常', err);})},handleSelectionChange(val){const _that = this;if (_that.stopReBack) {return false;}_that.departmentUsers = val;},}
}
</script>
<style scoped lang="scss">
div.dialog-content{.el-container{width: 100%;height: 500px;.el-aside{width: 25% !important;border: 1px #dcdfe6 solid;padding: 10px;div.user-department-panel{width: 100%;height: 100%;display: flex;flex-direction: column;background-color: #ffffff;}div.user-department-tree{flex: 1;padding: 5px 0;}div.user-select-panel{width: 100%;height: 100%;display: flex;flex-direction: column;background-color: #ffffff;div.user-select-title{height: 32px;line-height: 32px;text-align: center;border-bottom: 1px #dcdfe6 solid;}}}.el-main{border: 1px #dcdfe6 solid;margin:0 10px;padding: 10px;div.user-group-panel{width: 100%;height: 100%;display: flex;flex-direction: column;background-color: #ffffff;div.user-group-table{flex: 1;padding: 5px 0;}}}}
}
</style>

技术细节

其中主要需要查看的参数、组件、方法如下：

• 组件（主要用法去element-ui官网查看）
  :row-key=“getRowKey”：行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
  :reserve-selection=“true”：仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
  @selection-change=“handleSelectionChange”：当选择项发生变化时会触发该事件
• 参数
  //防止回显成功前对表格进行操作的标识,防止在调用toggleRowSelection方法改变选中状态，会调用@selection-change=“handleSelectionChange”
  stopReBack: false,
• 方法：
  //初始化树节点
  _that.initializeUserData();

注意

在使用toggleRowSelection()方法时要确保数据已经渲染出来，所以我使用了.then函数。

参考文献

table列表复现框【勾选-搜索-再勾选】功能

el-table中实现数据回显自动勾选

el-table复选框全部勾选以及勾选回显