利用slot插槽自定义列内容,这样就能获取到当前行的数据,然后按钮的disabled属性和当前行数据的disabled属性绑定,在点击按钮时修改当前行数据的disabled的属性就可以了。
以下代码是拿elementui官方代码稍微改了改的
:data="tableData"
style="width: 100%">
label="日期"
width="180">
{{ scope.row.date }}
label="姓名"
width="180">
姓名: {{ scope.row.name }}
住址: {{ scope.row.address }}
{{ scope.row.name }}
size="mini"
:disabled="scope.row.disabled"
@click="handleClick(scope.row)">点击按钮置灰
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
disabled: false
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
disabled: false
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
disabled: false
}]
}
},
methods: {
handleClick(row) {
row.disabled = true
}
}
}