el-table表格相关禁用

最新推荐文章于 2026-08-11 09:54:43 发布

原创最新推荐文章于 2026-08-11 09:54:43 发布 · 4.1k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue-cli

element

本文介绍如何在el-table中根据数据状态禁用部分select控件，通过遍历表格数据，判断非空值并设置disabled属性实现。适用于更新场景，确保已有数据不可编辑。

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>