el-table怎么禁止某一行不可勾选
时间: 2023-10-17 12:15:55 浏览: 98
您可以通过设置该行的 `disabled` 属性为 `true` 来禁止某一行不可勾选,例如:
```html
<el-table :data="tableData">
<el-table-column type="selection"/>
<el-table-column prop="name" label="Name"/>
<el-table-column prop="age" label="Age"/>
</el-table>
```
```javascript
// 在 tableData 中设置 disabled 为 true 的行
data () {
return {
tableData: [
{ name: 'Tom', age: 18 },
{ name: 'Lucy', age: 22, disabled: true },
{ name: 'Lily', age: 25 },
{ name: 'Jack', age: 30, disabled: true }
]
}
}
```
这样,第 2 行和第 4 行将会被禁止勾选。
相关问题
el-table怎么禁止某一行不可勾选,disabled属性不起作用
您好,对于el-table组件中某一行禁止勾选的问题,可以通过以下两种方式实现:
1. 在row或者cell的自定义模板中,通过控制checkbox的disabled属性来禁用某一行的勾选:
```
<template>
<el-table ...>
<el-table-column type="selection" width="55">
<template slot-scope="{row}">
<el-checkbox :disabled="row.disabled" v-model="selection" />
</template>
</el-table-column>
...
</el-table>
</template>
```
```
<script>
export default {
data() {
return {
selection: [],
tableData: [
{
name: 'John Brown',
age: 18,
disabled: true // 禁用
},
{
name: 'Jim Green',
age: 24,
disabled: false // 可选
},
...
]
}
}
}
</script>
```
2. 在row中定义selectable为false,表示不可选择该行:
```
<template>
<el-table :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="age" label="年龄" />
</el-table>
</template>
```
```
<script>
export default {
data() {
return {
tableData: [
{
name: 'John Brown',
age: 18,
selectable: false // 不可选
},
{
name: 'Jim Green',
age: 24,
selectable: true // 可选
},
...
]
}
},
methods: {
handleSelectionChange(val) {
console.log(val)
}
}
}
</script>
```
希望这些示例代码能够帮助您解决问题。任何问题都可以继续向我提问。
el-table代码勾选某一行
要在 el-table 中勾选某一行,你可以使用 row-selection 属性来实现。首先,在 el-table 标签中添加 row-selection 属性,并将其值设置为 true。然后,在 el-table-column 标签中添加 type 属性,并将其值设置为 "selection"。这将在表格的第一列中显示一个勾选框,用于选择行。
以下是一个示例代码:
```html
<el-table :data="tableData" row-selection>
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
```
在上面的示例中,tableData 是一个数组,包含了要显示在表格中的数据。勾选行后,你可以通过获取勾选的行数据进行进一步的处理。
希望能帮到你!如果有任何疑问,请随时提问。