el-table取消复选框
时间: 2023-10-09 09:11:37 浏览: 45
你可以通过设置 `show-checkbox` 属性为 `false` 来取消 `el-table` 组件的复选框。代码示例如下:
```html
<el-table :data="tableData" show-checkbox="false">
<!-- 表格列配置 -->
</el-table>
```
这样就可以隐藏复选框了。注意,这会同时隐藏表头的复选框和每一行的复选框。如果你只想隐藏表头的复选框,可以设置 `header-checkbox-disabled` 属性为 `true`:
```html
<el-table :data="tableData" show-checkbox header-checkbox-disabled>
<!-- 表格列配置 -->
</el-table>
```
希望对你有所帮助!如有更多问题,请继续提问。
相关问题
el-table表格复选框回显
如果你想在 el-table 中使用复选框,并且在编辑页面中回显已选中的选项,可以通过以下步骤实现:
1. 在 el-table-column 中添加 type 属性为 "selection",并绑定 v-model 到一个数组中,用于存储选中的数据。
```
<el-table-column type="selection" :selectable="row => !row.disabled" v-model="selectedRows"></el-table-column>
```
2. 在数据源中添加一个属性用于标记该行数据是否已选中,例如 selected。
```
[
{ name: 'John', age: 18, selected: true },
{ name: 'Bob', age: 22, selected: false },
{ name: 'Alice', age: 20, selected: true }
]
```
3. 在编辑页面中,将选中的数据传递给 el-table 的 selected 属性,并将数据源中 selected 属性为 true 的数据渲染为已选中状态。
```
<el-table :data="tableData" :selected="selectedRows">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column type="selection" :selectable="row => !row.disabled" v-model="selectedRows"></el-table-column>
</el-table>
<el-button @click="editSelected">Edit Selected</el-button>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 18, selected: true },
{ name: 'Bob', age: 22, selected: false },
{ name: 'Alice', age: 20, selected: true }
],
selectedRows: []
}
},
methods: {
editSelected() {
// 处理选中的数据
console.log(this.selectedRows);
}
}
}
</script>
```
这样就能实现 el-table 表格复选框回显的功能了。
el-table 隐藏复选框表头
如果你想在 `el-table` 中隐藏复选框表头,可以通过设置 `show-header` 属性为 `false` 来实现。代码如下:
```html
<el-table :data="tableData" :show-header="false" v-model="checkedItems">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column prop="name" label="Name">
</el-table-column>
<el-table-column prop="age" label="Age">
</el-table-column>
</el-table>
```
这样,在表格中只会显示数据行,而不会显示复选框表头。注意,如果你想要选中行时仍然显示复选框,可以将 `show-header` 属性设置为 `true`。