elementui table 添加单选按钮
时间: 2023-07-19 11:31:44 浏览: 85
要在 ElementUI 的 table 中添加单选按钮,你需要使用 table 的 selection 属性来启用单选模式,并且使用 scoped slot 的方式在 table-column 中添加单选按钮。
下面是一个示例代码:
```
<template>
<el-table :data="tableData" v-model="selectedRow" :selectable="row => row.status !== 'disabled'">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="status" label="Status"></el-table-column>
<el-table-column label="Action">
<template slot-scope="scope">
<el-button v-if="scope.row.status === 'enabled'" @click="handleEdit(scope.$index)">Edit</el-button>
<el-button v-else disabled>Edit</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', status: 'enabled' },
{ name: 'Alice', status: 'enabled' },
{ name: 'Bob', status: 'disabled' }
],
selectedRow: null
}
},
methods: {
handleEdit(index) {
const row = this.tableData[index]
// handle edit action
}
}
}
</script>
```
在这个示例中,我们使用了 table 的 selection 属性来启用单选模式,并且使用了 selectable 属性来指定只有 status 为 "enabled" 的行才可以被选中。在 table-column 中,我们使用了 type="selection" 来显示单选按钮,并且使用 scoped slot 的方式在 table-column 中添加了其它的操作按钮。
同时,我们也使用了 v-model 来绑定选中的行数据,这样在 handleEdit 方法中就可以方便地获取到选中的行数据并进行操作。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)