vue 表格渲染时根据后台返回的数据 判断某一行的某一列不可编辑
时间: 2023-09-12 22:07:12 浏览: 257
vue可编辑表格
在 Vue 表格渲染时,可以通过自定义特定列的编辑模板来实现某一行的某一列不可编辑。具体的实现方式可以参考以下代码:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄">
<template slot-scope="scope">
<template v-if="scope.row.editable">
<el-input v-model="scope.row.age" type="number"></el-input>
</template>
<template v-else>
<span>{{ scope.row.age }}</span>
</template>
</template>
</el-table-column>
</el-table>
```
在上述代码中,我们通过 `v-if` 指令判断当前行是否可编辑,如果可编辑则显示一个带有输入框的 `el-input` 组件,否则显示一个普通的文本标签 `span`。通过这种方式,我们可以根据后台返回的数据来决定某一行的某一列是否可编辑。
在具体实现时,我们可以在获取到后台返回的数据后,遍历每一行的数据,在需要不可编辑的列上添加一个 `editable` 属性,并将其值设置为 `false`。这样,在渲染表格时,就可以通过 `v-if` 指令来判断是否可编辑了。
阅读全文