使用elementUI时表格checkbox问题

rocky191
  • 219

在实际开发中,用到了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...
选择一行后,点高级搜索,选择状态就消失了。怎么回事,急求大神解决

回复
阅读 15.4k
2 个回答

表格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)
    }
  }

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏