在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 使用elementUI時(shí)表格checkbox問題

使用elementUI時(shí)表格checkbox問題

在實(shí)際開發(fā)中，用到了element的表格組件，其中包含了checkbox。發(fā)現(xiàn)了這樣一個(gè)問題，每次勾選某行checkbox后，點(diǎn)擊別的按鈕顯示一個(gè)dialog時(shí)，剛才勾選行的checkbox的勾選狀態(tài)會(huì)消失。
圖片描述

我要根據(jù)是否勾選判定是否可以啟動(dòng)該進(jìn)程。我是判斷的multipleSelection的長度不為0可以執(zhí)行啟動(dòng)。第一次可以正常判斷，出現(xiàn)彈窗后，checkbox勾選狀態(tài)消失，但是multipleSelection的長度依然不為0，這個(gè)時(shí)候不用勾選就可以啟動(dòng)，這是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="狀態(tài)" class-name="cursor">
              <template slot-scope="scope">
                <div @click="showSingleJcInfo(scope.row)">
                  <span v-if="scope.row.confState=== '運(yùn)行中'" style="color:#00b104">運(yùn)行中</span>
                  <span v-else style="color: #ff3d3d">已停止</span>
                </div>
               </template>
            </el-table-column>
            <el-table-column align="center" class-name="cursor" label="進(jìn)程名" 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="進(jìn)程關(guān)鍵字" 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="主機(jī)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="啟動(dòng)時(shí)間" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="updateTime" label="更新時(shí)間" show-overflow-tooltip></el-table-column>
          </el-table>

圖片描述

求解決方案

我把類似的問題放在了jsfiddle上面，https://jsfiddle.net/rocky191...
選擇一行后，點(diǎn)高級搜索，選擇狀態(tài)就消失了。怎么回事，急求大神解決

回答
編輯回答
解夏

你是在handleSelect方法里記錄的multipleSelection嗎？

2017年11月11日 12:33
編輯回答
舊顏

表格data數(shù)據(jù)用計(jì)算屬性計(jì)算就好了。雖然不太清楚怎么回事。

<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="進(jìn)程名" 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="主機(jī)名" 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="執(zhí)行類型" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="startTime" label="執(zhí)行時(shí)間" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="userTime" label="耗時(shí)" 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="執(zhí)行簡報(bào)" 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)
    }
  }
2017年3月24日 16:14