记忆选中删除

最新推荐文章于 2024-06-13 23:47:14 发布

_菜鸟果果

最新推荐文章于 2024-06-13 23:47:14 发布

阅读量442

点赞数 6

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_66390045/article/details/135346743

版权

          <div style="display: flex; width: 100%">
            <el-input style="margin-right: 10px" v-model="zjdmc" placeholder="请输入子节点"></el-input>
            <el-button class="searchBtn" @click="searchZjd">搜索</el-button>
          </div>
          <div class="choose">
            <el-tag :key="tag.id" v-for="tag in zjdSelections" closable :disable-transitions="false" @close="delZjd(tag)">
              {{ tag.orgName }}
            </el-tag>
          </div>
          <el-table :header-cell-style="{
            color: '#42485B',
          }" :data="zjdList" ref="userTableZjd" @selection-change="selectionChangeHandleZjd" height="199px"
            style="width: 100%">
            <el-table-column type="selection" header-align="center" align="center"></el-table-column>
            <el-table-column prop="orgName" header-align="center" align="center" label="子节点名称"></el-table-column>
            <el-table-column prop="rs" header-align="center" align="center" label="党员数量"></el-table-column>
          </el-table>

         // 选择子节点
     let userTableZjd = ref(null);
     let zjdmc = ref("");
     let zjdSelections = ref([]);
     let zjdList = ref([]);
     let zjdListCopy = ref([]);
     const searchZjd = () => {
       if (zjdmc.value) {
         zjdList.value = zjdListCopy.value.filter((item) => {
           if (item.orgName.indexOf(zjdmc.value) > -1) {
             return true;
           }
         });
       } else {
         zjdList.value = zjdListCopy.value;
       }
     };
     const selectionChangeHandleZjd = (val) => {
       zjdSelections.value = val;
     };
     const delZjd = (tag) => {
       zjdSelections.value.splice(zjdSelections.value.indexOf(tag), 1);
       nextTick(() => {
         setSelectRowZjd();
       });
     };
     // 设置选中的方法
     const setSelectRowZjd = () => {
       if (!zjdSelections.value || zjdSelections.value.length <= 0) {
         userTableZjd.value.clearSelection();
         return;
       }
       // 标识当前行的唯一键的名称
       let idKey = "orgId";
       let selectAllIds = [];
       zjdSelections.value.forEach((row) => {
         selectAllIds.push(row[idKey]);
       });
       userTableZjd.value.clearSelection();
       for (var i = 0; i < zjdList.value.length; i++) {
         if (selectAllIds.indexOf(zjdList.value[i][idKey]) >= 0) {
           // 设置选中，记住table组件需要使用ref="table"
           userTableZjd.value.toggleRowSelection(zjdList.value[i], true);
         }
       }
     };