el-table-column的selectable怎么用
时间: 2023-11-11 12:58:17 浏览: 159
el-table-column的selectable属性用于设置列是否可选中。当可选中时,列头会显示一个复选框,可以通过选择复选框来选择该列的内容。
要使用selectable属性,可以在el-table-column标签中添加该属性并设置为true。例如:
```html
<el-table-column prop="name" label="姓名" selectable></el-table-column>
```
相关问题
el-table el-column selection 设置禁用无效
如果在 ElementUI 的 el-table 中设置了 `disable` 属性,但是 el-column 的选择功能仍然可用,可能是由于 `disable` 属性只是禁用了 el-table 的选择功能,而 el-column 是作为 el-table 的子组件,不受 el-table 的 `disable` 属性控制。
如果要禁用 el-column 的选择功能,可以通过修改 el-column 的 `selectable` 属性来实现。具体代码如下:
```html
<template>
<el-table
:data="tableData"
:selectable="!disabled"
@selection-change="handleSelectionChange"
:row-key="row => row.id">
<el-table-column
type="selection"
:selectable="selectable"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="age"
label="年龄">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '李四', age: 20 },
{ id: 3, name: '王五', age: 25 },
],
disabled: true,
selectable: false,
};
},
methods: {
handleSelectionChange(selection) {
console.log(selection);
},
},
};
</script>
```
在上面的代码中,我们通过 `selectable` 属性来控制 el-column 的选择功能是否可用。如果 `selectable` 的值为 `false`,则 el-column 的选择功能将被禁用。在 `el-table` 中,我们可以通过 `selectable` 属性来控制 el-table 的选择功能是否可用。如果 `selectable` 的值为 `false`,则 el-table 的选择功能将被禁用。
同时,我们也可以通过 `disabled` 属性来控制整个 el-table 的选择功能是否可用。如果 `disabled` 的值为 `true`,则整个 el-table 的选择功能将被禁用。
解释下这段代码含义<el-table-column :reserve-selection="true" type="selection" :selectable="selectable" align="center" width="46"> </el-table-column>
这段代码是一个Vue组件里的el-table-column,用于显示一个表格的列。其中,reserve-selection表示在选中当前行时是否保留之前已选中的行,type为selection表示该列为复选框列,selectable表示该列是否可选,align表示该列内的内容在水平方向上的对齐方式,width表示该列的宽度为46个单位(可以是像素或百分比,具体根据实际情况而定)。
阅读全文