2020/08/14 el表格禁用部分有值控件(主要针对select控件)
表格通过操作按钮跳转路由,传参传值到详情页,详情页的表格通过传过来的值进行判断,有值的禁用不可修改,并且表格可新增
代码小记:
methods代码如下:
说明:
this.tablelist[i].disabled = false
// 这一句是手动插入到数据里面的,如果接口返回的数据中没有这种值可以这么做
通过遍历传递过来的表格数据,查找非空值,非空值时,disabled为true(禁用当前表头下的控件)
getlistreadonly () {
if (this.type == 'updata') {
for (let i = 0; i < this.tablelist.length; i++) {
this.tablelist[i].disabled = false
if (this.tablelist[i].name !== '' || this.tablelist[i].project == '') {
this.tablelist[i].disabled = true
} else {
this.tablelist[i].disabled = false
}
}
}
},
而在html代码中需绑定该字段,如下:
<el-table :data="tablelist">
<el-table-column prop="name" label="填写姓名" align="center">
<template slot-scope="scope">
<!-- :disabled="scope.row.disabled"绑定当前这条数据的是否禁用字段 -->
<el-select
v-model="scope.row.name"
:disabled="scope.row.disabled"
size="small"
>
<el-option
v-for="(item, index) in list"
:label="item.name"
:value="item.name"
:key="index"
></el-option>
</el-select>
</template>
</el-table-column>
</el-table>
2020/08/14小记,el-table相关数据禁用