这是一个 el-table ,前面有勾选框
需求:
“结算月份”有判断条件,如果超过某个事件,这条数据的"修改"、“删除”按钮都隐藏掉了
问题:
单个的按钮可以隐藏,但是上方的按钮不能隐藏,而且勾选了列表的数据,上方的"修改"、“删除”按钮可以对数据进行控制(即使单个的按钮隐藏掉,还是能通过上方按钮控制勾选的数据)
所以,需要对前面的勾选框进行处理,分为 可选 和 不可选
<el-table
max-height="500px"
v-loading="loading"
:data="staffIncomeList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
...
<el-table-column label="调整日期" align="center" prop="amountDate">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.amountDate, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="120"
>
<template slot-scope="scope">
<el-row>
<el-col :span="12" v-if="scope.row.showEdit">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['lawerfin:staffIncome:edit']"
>修改
</el-button>
</el-col>
<!-- <el-col :span="24" v-else>
<el-button
size="mini"
type="text"
icon="el-icon-setting"
@click="handleAdjust(scope.row)"
>调整
</el-button>
</el-col> -->
<el-col :span="12" v-if="scope.row.showEdit">
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['lawerfin:staffIncome:remove']"
>删除
</el-button>
</el-col>
</el-row>
</template>
</el-table-column>
</el-table>
因为我单个的按钮是通过自身的 showEdit 属性来控制的,所以也要利用这个属性
解决方法:
1.<el-table-column type="selection" width="55" align="center" />加上 :selectable="selectableRow" 修改成下面:
<el-table-column type="selection" width="55" align="center" :selectable="selectableRow" />
2.在method 加上事件:页面加载就会执行selectableRow函数,而且row接收到的是当前项(你有多少列,一条数据就会执行多少次selectableRow函数),index 则是当前项的索引(从0开始)
methods: {
selectableRow(row,index){
console.log(row,index)
// return index > 0 测试
return row.showEdit
},
...
}