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">
<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">
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">
<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)
以上即可。
