elementUI 组件的selection多选框出现错乱问题怎么办哇

    <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%;"
          @selection-change="handleSelectionChange"
          >
          <el-table-column type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="日期"
            width="120"
            prop="date"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" width="130">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="addOrUpdate(scope.row.id)">编辑</el-button>
              <el-button type="text" size="small" @click="delData(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

怎么办呀

代码试了一下，没有这种问题，刷新看看

这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/1051294
这篇博客你也可以参考下：element UI表格绑定动态数据与selection复选操作
除此之外, 这篇博客: 实现ElementUI中两个Select选择联动效果中的 实现ElementUI中两个Select选择联动效果 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

先上图
在这里插入图片描述
通过赋值的方式实现即子级下拉选项循环数组为空将所需的值对空数组重新赋值

代码如下第一个循环数组为procedureType 第二个是causeGroup 暂且称之为父级与子级

  <el-select 
     v-model="ruleForm.procedure_type" 
     placeholder="请选择" 
     @change="changeSelect"
     >
      <el-option
        v-for="(item,i) in procedureType"
        :key="i"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>
    <el-select 
      v-model="ruleForm.cause_group" 
      placeholder="请选择" 
      style="margin-left: 30px"
      >
      <el-option
        v-for="(item,i) in causeGroup"
        :key="i"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>

须注意的是父级下拉绑定的change事件要对子级作出滞空操作也就是清空子选项的值
不然会出现切换选项1 或者选项2的时候子级选项值保留的问题如下所示

在这里插入图片描述

 methods: {
    changeSelect() {
      // 联动子级滞空
      this.ruleForm.cause_group = "";
      // 循环遍历父级
      for (const k in this.procedureType) {
        if (this.ruleForm.procedure_type === this.procedureType[k]) {
        // 核心代码在这里 进行赋值操作
          this.causeGroup = this.TypeObj[this.ruleForm.procedure_type];
        }
      }
    },
  },
  data() {
    return {
    // 在这里定义所需的值
      procedureType: ["选项a", "选项b"],
      TypeObj: {
        选项a: ["连级选项a1", "连级选项a2", "连级选项a3"],
        选项b: ["连级选项b1", "连级选项b2", "连级选项b3"],
      },
      ruleForm: {
        procedure_type: "",
        cause_group: "",
      },
      // 由 changeSelect 接管 causeGroup 的值
      causeGroup: [],
    };
  },

到这里已经实现了两个Select下拉联动的效果关键就在于将定义好的值赋值给子级数组
本文是模拟假数据所以直接在数组定义数据如果是从接口拿值在接口请求处将数据赋给procedureType与TypeObj即可
其实还有更简单的写法子级数组直接循环不进行赋值操作但仍需保留滞空操作

<el-select
      v-model="ruleForm.cause_group"
      placeholder="请选择"
      style="margin-left: 30px"
    >
      <el-option
        v-for="(item, i) in TypeObj[ruleForm.procedure_type]"
        :key="i"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>

elementUI 组件的selection多选框出现错乱问题 怎么办哇

elementUI 组件的selection多选框出现错乱问题怎么办哇