数据动态变化时实现多选及回显

 

<template>
  <el-dialog title="设置权限" :visible.sync="showDialog" :close-on-click-modal="false" :append-to-body="true" width="800px">
    <div v-loading="loading">
      <el-radio-group v-model="setPowerRadio">
        <el-radio :label="0" style="display:block;line-height: 30px;">所有人可见</el-radio>
        <el-radio :label="1" style="display:block;line-height: 30px;">选择可见</el-radio>
      </el-radio-group>
      <div v-show="setPowerRadio==1">
        <el-row>
          <el-col :span="10" style="height: 300px;border: 1px solid #CBCBCB;">
            <div class="power-department-border">部门</div>
            <el-tree :data="unitsList" :empty-text="emptyText" node-key="id" ref="tree" :default-expand-all="true"
              :highlight-current="true" :render-content="renderContentStation" @node-click="handleNodeClick"
              class="power-col-left-border"></el-tree>
          </el-col>
          <el-col :span="14" style="padding: 0 10px;height: 300px;">
            <!-- ref="multipleTable" -->
            <!--选择项发生变化 @selection-change="handleSelectionChange" -->
            <el-table border :data="tableData" tooltip-effect="dark" style="width: 100%" ref="multipleTable"
              @select="handleSelectionRow" @select-all="handleSelectionAll" class="power-col-right-overflow">
              <el-table-column type="selection" width="55">
              </el-table-column>
              <el-table-column prop="userName" label="姓名">
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <div class="select-people">
          <div>已选择（{{ tableDataRight.length }}）：</div>
          <div>
            <span v-for="(item, index) in tableDataRight" :key="index">
              {{ item.userName }}<span v-if="tableDataRight.length != index + 1">,</span>
            </span>
          </div>
        </div>
      </div>
      <div class="text-center-margin-20-0">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit()">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    data() {
      return {
        showDialog: false,
        loading: false,
        setPowerRadio: 0, //0所有 1选择
        CurrentDepartmentId: "", //当前部门id
        unitsList: [], //部门数组
        filterText: '', //关键字查询
        emptyText: '',
        id: '', //父组件id
        tableData: [], //人员显示
        leftCodes: [], //左侧列表id集合
        tableDataRightCodes: [], //选中的人员id数组
        tableDataRight: [], //选中的人员总数据
        search: 0, // 1.搜索开始  0搜索结束
      };
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      },
    },
    methods: {
      add(row, type) {
        this.showDialog = true;
        this.routerType = type;
        this.$nextTick(() => {
          if (row.fid) {
            this.id = row.fid;
          } else {
            this.id = row.id;

          }
          this.getCatetoryAuthLink(); //获取指定分类授权信息
          this.getDepartmentLink();
        });
      },
      //获取指定分类授权信息
      getCatetoryAuthLink() {
         //读初始选中的信息
         this.tableDataRight = res.data.data.userList; 
         this.leftCodes = this.tableDataRight.map(dev => dev.id);
      },
      //获取左侧树型数据
      getDepartmentLink() {
        this.unitsList = []
        this.loading = true;
        this.search = 1;
        getDepartment().then(res => {
          if (res.data.code == 200) {
            let dataLink = res.data.data
            this.unitsList = dataLink.list;
            this.$nextTick(() => {
              this.loading = false;
              if (dataLink.list.length != 0) {
                this.CurrentDepartmentId = dataLink.list[0].id;
                this.$refs.tree.setCurrentKey(dataLink.list[0].id);
                this.getNewPeople(dataLink.list[0].id);
              }
            })
          } else {
            this.loading = false;
            this.emptyText = '暂无数据'
            this.$message.error(res.data.msg);
          }
        });
      },
      //树-转换
      handleNodeClick(value) {
        this.CurrentDepartmentId = value.id;
        this.search = 1;
        this.$nextTick(() => {
          this.getNewPeople(value.id);
        })
      },
      //部门下的人员
      getNewPeople(id) {
        this.tableData = []
        let param = {
          departmentId: id,
          page: false,
        }
        getUserList(param).then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.defaultChoose(this.tableDataRight, this.tableData);
            this.$nextTick(() => {
              this.search = 0;
            });
          } else {
            this.$message.error(res.data.msg);
          }
        });
      },
      //选择单行
      handleSelectionRow(row, selected) {
        if (this.search) return;
        let booleanValue = this.tableDataRight.some(item => {
          return item.id == selected.id
        })
        //包含
        if (booleanValue) {
          this.tableDataRight = this.tableDataRight.filter(item => item.id != selected.id)
        } else {
          this.tableDataRight.push(selected)
        }
      },
      //全选/取消全部
      handleSelectionAll(selection) {
        if (this.search) return;
        if (selection.length != 0) {
          let arr = [...this.tableDataRight, ...selection];
          this.$nextTick(() => {
            // this.tableDataRight = Array.from(new Set(arr)) //简单去重
            let unique = new Map(); //复杂去重
            arr.forEach(item => unique.set(item.id, item));
            this.tableDataRight = [...unique.values()];
          })
        } else {
          this.tableData.forEach(item => {
            this.tableDataRight = this.tableDataRight.filter(ele => ele.id != item.id)
          })
        }
      },
      // 已选择的设备需要默认勾选
      // arr所有选中的；tableArr右侧表格显示数据
      defaultChoose(arr, tableArr) {
        /*
        注意：这里不能直接遍历arr,element和item 他们在内存中的地址不同，所以他们是两份不同的数据，所以这么写 toggleRowSelection(element, true) 是不会回显选中的
         */
        for (let index = 0; index < tableArr.length; index++) {
          const item = tableArr[index];
          arr.forEach(element => {
            if (element.id == item.id) {
              this.$nextTick(() => {
                this.$refs.multipleTable.toggleRowSelection(item, true);
              });
            }
          });
        }
      },
      //处理名称-站点
      renderContentStation(h, {
        node,
        data,
        store
      }) {
        return ( < div >
          <span title = {
            data.departmentName
          }
          class = 'style-demo' > {
            data.departmentName
          } </span> </div > );
      },
      onSubmit() {
        if (this.setPowerRadio == 1 && this.tableDataRight.length == 0) {
          this.$message.warning("选择人员不可为空");
          return false;
        }
        let userIdList = this.tableDataRight.map(dev => dev.id);
        let param = {}
        if (this.routerType == '素材分类') {
          param = {
            categoryId: this.id,
            fvisible: this.setPowerRadio,
            userIdList: userIdList,
          }
        } else { //素材审核  素材管理
          param = {
            recordId: this.id,
            fvisible: this.setPowerRadio,
            userIdList: userIdList,
          }
        }
        let urlLink = null
        if (this.routerType == '素材分类') {
          urlLink = setCatetoryAuth;
        } else {
          urlLink = setRecordAuth;
        }
        urlLink(param).then(res => {
          if (res.data.code == 200) {
            this.$message.success("操作成功");
            this.showDialog = false;
            if (this.routerType == '素材分类' || this.routerType == '素材管理') {
              this.$emit("refresh");
            }
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    }
  }

</script>
<style scoped>
  .select-people {
    border: 1px solid #CBCBCB;
    background: #F0F5F7;
    color: #000000;
    margin: 10px;
    width: calc(100% - 20px);
    min-height: 100px;
    padding: 10px;
    box-sizing: border-box;
  }

  .power-department-border {
    border: 1px solid #CBCBCB;
    background: linear-gradient(180deg, #F0F5F7 93%, #DFE4E6 97%);
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;
    line-height: 1.5;
    padding: 5.5px 0;
    font-weight: bold;
    color: #666666;
    font-size: 16px;
    font-size: calc(var(--scale) * 16px);
    border-bottom: 1px solid #CBCBCB;
  }

</style>