直播app开发，复选框选中所在的行，右侧按钮禁掉
<template>
<!--
el-table中复选框，当复选框选中所在的行，name该行对应的操作按钮，要禁掉（不可点击）
单选采用的方法：当点击选中所在的行，row中会有isDisabled属性
全选： 因为selectAll 没有row参数，所以给选中的item,添加一个isDisabled属性
-->
<div>
<el-table
:data="submitList"
v-model="check2"
@select="select"
@select-all="selectAll"
>
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column prop="name" label="文件名" width="200"></el-table-column>
<el-table-column prop="" label="类型" width="200" align="center">
<template scope="scope">
<el-button :style="{'pointer-events': scope.row.isDisabled ? 'none': 'visiblePainted'}"
@click="btn">按钮</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
submitList: [{ name: "1111" }, { name: "2222" }, { name: "3333" }],
check2: "",
};
},
methods: {
// 点击选中复选框，触发的事件
select(selection, row) {
const selected = selection.length && selection.indexOf(row) !== -1;
if (selected) {
row.isDisabled = true // 使用点击后，所在的row上，有isDisabled属性操作
} else {
row.isDisabled = false
}
},
// 点击全选按钮，操作按钮禁用处理
// 因为selectAll拿不到row，所以采用给选中的item,添加一个isDisabled属性
selectAll(selection) {
if (selection.length > 0) {
selection.forEach(select => {
select.isDisabled = true
})
} else {
this.tableData.forEach(select => {
select.isDisabled = false
})
}
},
btn(){
console.log('按钮的点击事件')
}
},
};
</script>
以上就是 直播app开发，复选框选中所在的行，右侧按钮禁掉，更多内容欢迎关注之后的文章