使用elementUI时表格checkbox问题

Question

在实际开发中，用到了element的表格组件，其中包含了checkbox。发现了这样一个问题，每次勾选某行checkbox后，点击别的按钮显示一个dialog时，刚才勾选行的checkbox的勾选状态会消失。

我要根据是否勾选判定是否可以启动该进程。我是判断的multipleSelection的长度不为0可以执行启动。第一次可以正常判断，出现弹窗后，checkbox勾选状态消失，但是multipleSelection的长度依然不为0，这个时候不用勾选就可以启动，这是bug。

<el-table ref="jcqtTable" v-loading="loading" :data="jcqtTableCon.slice((currentPage-1)*pageSize,currentPage*pageSize)" tooltip-effect="dark" stripe style="width: 100%" @select="handleSelect" @selection-change="handleSelect" @select-all="handleSelect">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column align="center" label="状态" class-name="cursor">
              <template slot-scope="scope">
                <div @click="showSingleJcInfo(scope.row)">
                  <span v-if="scope.row.confState=== '运行中'" style="color:#00b104">运行中</span>
                  <span v-else style="color: #ff3d3d">已停止</span>
                </div>
               </template>
            </el-table-column>
            <el-table-column align="center" class-name="cursor" label="进程名" show-overflow-tooltip width="120">
              <template slot-scope="scope">
                <span style="color:#409eff;" @click="showJcqtInfo(scope.row)">{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="processKeywords" label="进程关键字" show-overflow-tooltip width="120"></el-table-column>
            <el-table-column align="center" prop="userName" label="归属用户" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="hostIp" label="主机IP" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="processNote" label="备注" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="createTime" label="启动时间" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="updateTime" label="更新时间" show-overflow-tooltip></el-table-column>
          </el-table>

求解决方案

我把类似的问题放在了jsfiddle上面，https://jsfiddle.net/rocky191...
选择一行后，点高级搜索，选择状态就消失了。怎么回事，急求大神解决点击预览

Answer 1

表格data数据用计算属性计算就好了。虽然不太清楚怎么回事。

<el-table ref="czjlTable" v-loading="loading" :data="tableData" tooltip-effect="dark" stripe style="width: 100%" @selection-change="onSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column align="center" class-name="cursor" label="进程名" show-overflow-tooltip width="120">
              <template slot-scope="scope">
                <span style="color:#409eff;" @click="showJcInfo(scope.row)">{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="hostName" label="主机名" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="ip" label="IP" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="commandType" label="执行类型" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="startTime" label="执行时间" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="userTime" label="耗时" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="username" label="操作人" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" class-name="cursor" label="执行简报" show-overflow-tooltip>
              <template slot-scope="scope">
                <span style="color:#409eff;" @click="showExecute(scope.row)">{{scope.row.executeResult}}</span>
              </template>
            </el-table-column>
          </el-table>

computed: {
      tableData() {
        return this.czjlTableCon.slice((this.currentPage-1)*this.pageSize, this.currentPage*this.pageSize)
    }
  }

Answer 2

你是在handleSelect方法里记录的multipleSelection吗？