element ui --- table radio 表格数据单选及checkbox多选，自定义checkbox多选
表格实现单选或者多选的功能很常见，在此做个笔记。
首先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) } } }
以上即可。
