表格實現單選或者多選的功能很常見，在此做個筆記。
首先el-table里實現單選，點擊每行數據實現選中高亮效果。代碼如下：
<el-table :data="stockIndata" stripe border style="width: 100%;margin-top:20px;" highlight-current-row :header-cell-style="{background:'#f7f7f7'}" @current-change="handleSelectionChange"> <el-table-column align="center" width="55" label> <template slot-scope="scope"> <el-radio @change.native="handleSelectionChange(scope.row)" v-model="seleted" :label="scope.row.id"> </el-radio> </template> </el-table-column> <el-table-column prop="applyCode" label="單號" align="center" width="130"></el-table-column> <el-table-column prop="templateCode" label="模板ID" align="center" width="80"></el-table-column> <el-table-column prop="templateName" label="名稱" align="center" width="130"></el-table-column> </el-table>
@current-change="handleSelectionChange"檢測每行數據狀態改變時觸發，搭配highlight-current-row 效果更佳。@change.native="handleSelectionChange(scope.row)"檢測radio值發生變化時觸發。
在方法中定義handleSelectionChange事件來處理選中值以進行下面的操作。
// 單選 handleSelectionChange(val){ if(val){ this.seleted = val.id; this.oaOrder = val.oaOrder; this.oaUrl = val.oaUrl; } },
以上是表格進行單選的操作。
多選checkbox邏輯代碼如下：
1.文檔自帶不用自定義可實現全選的功能
<el-table ref="multipleTable" :data="cardList" @row-click="getAddList" :header-cell-style="{background:'rgba(251, 251, 252, 1)'}"@selection-change="handleSelectionChange"> <el-table-column align="center" type="selection" width="55"> </el-table-column> <el-table-column prop="cardName" label="卡券名稱" align="center"></el-table-column> <el-table-column prop="salePrice" label="售價" align="center"> <template slot-scope="scope"> <span>￥{{scope.row.salePrice}}</span> </template> </el-table-column> <el-table-column prop="cardNo" label="卡號" align="center"></el-table-column> </el-table>
@selection-change方法來監聽選中的值。@row-click用這個方法來點擊每行實現多選框選中高亮。
// 全選 handleSelectionChange(val) { this.selectionChangeList = val; if(this.selectionChangeList.length>0){ this.isBand = false }else{ this.isBand = true; } }, // 點擊每行選中 getAddList(row){ this.$refs.multipleTable.toggleRowSelection(row); },
2.自定義實現多選功能，不帶全選功能。
<el-table :data="item.rights" stripe border style="width: 100%;margin-top:20px;"> <el-table-column label="請選擇核銷權益" width="90"> <template slot-scope="scope"> <el-checkbox :disabled="item.groupCode != '' && item.groupCode != infoData.usedGroupCode && infoData.usedGroupCode!= null &&infoData.usedGroupCode!= ''" @change="handlerClick('ischeck',scope.row,item.groupCode)" v-model="scope.row.isChecked" ></el-checkbox> </template> </el-table-column> <el-table-column prop="rightTypeDesc" label="權益類型" width="80"></el-table-column> <el-table-column prop="code" label="權益" class-name="inner-table-style" min-width="120"> <template slot-scope="scope"> <div> <el-table :data="scope.row.rightsDetails" :show-header="false" class="inner-table" v-if="scope.row.rightsDetails.length > 0"> <el-table-column prop="rightContent"></el-table-column> </el-table> </div> </template> </el-table-column> <el-table-column prop="rightsDetails" label="適用類型" v-if="platfrom == 'BB'"> <template slot-scope="scope"> <div v-for="(item,index) in scope.row.rightsDetails" :key="index" >{{item.availableType}}</div> </template> </el-table-column> <el-table-column prop="totalNumber" label="總次數" width="80"></el-table-column> <el-table-column prop="usedNumber" label="可用次數" width="100"> <template slot-scope="scope"> <div>{{scope.row.totalNumber- scope.row.usedNumber}}</div> </template> </el-table-column> <el-table-column prop="usedTime" label="本次使用次數" width="140"> <!-- :prop="`rights.${scope.$index}.usedTime`" --> <template slot-scope="scope"> <el-form-item label=" " v-show="scope.row.isChecked == true" :prop="'rights.'+scope.$index+'.usedTime'" :rules="rules.usedTime" class="costValue"> <el-input style="margin:0;width:89%" type="text" v-model="scope.row.usedTime"></el-input> </el-form-item> </template> </el-table-column> <el-table-column prop="rightsDetails" class-name="inner-table-style" label="售價" width="120"> <template slot-scope="scope"> <div> <el-table :data="scope.row.rightsDetails" class="inner-table" :show-header="false" v-if="scope.row.rightsDetails.length > 0"> <el-table-column prop="salePrice" align="center" header-align="center"> <template slot-scope="scopeInner"> <div v-if="scope.row.rightsType != 3 && scopeInner.row.salePrice!= null ">￥{{scopeInner.row.salePrice | getMoney}}</div> <div v-else></div> </template> </el-table-column> </el-table> </div> </template> </el-table-column> <el-table-column prop="settlement_price" label="到店付" width="80"> <template slot-scope="scope"> <div v-if="scope.row.settlement_price!=null">￥{{scope.row.settlement_price | getMoney}}</div> <div v-else></div> </template> </el-table-column> </el-table>
當點擊某條數據時，set一個isChecked 為true屬性，然自定義一個數組來接收選中的每條你想要的數據，取消勾選則從數組里刪除這條數據，設置isChecked 為false即可。
handlerClick(action,data,code){ if(action =='ischeck'){ if(data.isChecked){ this.rightUseDetails.push(data); }else{ this.$set(this.rightUseDetails[this.rightUseDetails.indexOf(data)],'usedTime',null) this.rightUseDetails.splice(this.rightUseDetails.indexOf(data), 1) } } }
以上即可。