vue el-table 内嵌套 select 遇到问题？

  • Z时代
  • 2024-02-24
  • 分类：IT

如下代码我在el-table里面嵌套了一个select：

<template v-slot:is_finished="{ row }">
          <el-select v-model="row.is_finished" placeholder="请选择" @change="handleGetFinished" :disabled="row.is_finished == 2">
            <el-option
              v-for="item in finishOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </template>

我们的要求是选择了“是”后，点击保存，刷新表格数据后选择了“是”的，要禁用select，和提交按钮。

我是怎么做的呢，首次进入页面根据后端接口返回的数据控制禁用:disabled="row.is_finished == 2"；

提交数据的时候需要获取选项的这个值，于是select使用change事件，但是，我选择后就直接改掉了行row.is_finished的值，直接禁用了，而且提交按钮也给禁用了，如下图：
vue el-table 内嵌套 select 遇到问题？

怎么样才能不影响select选择和按钮提交？

回答：

想实现仅根据保存后的数据来控制select和按钮的状态，可以加工一下后端返回的数据：每行数据新增一个属性rowDisable，默认为false；如果row.is_finished 等于 2 ，设置rowDisable为true。在渲染table中的 select 和 保存按钮 时，根据行rowDisable来决定是否禁用。这样，即使select值发生变化，也不会导致rowDisable值发生变化。

回答：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column label="完成状态">
      <template v-slot="{ row }">
        <el-select
          v-model="row.is_finished"
          placeholder="请选择"
          @change="handleSelectChange(row)"
          :disabled="row.disableSelect">
          <el-option
            v-for="item in finishOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
    </el-table-column>
  </el-table>
  <el-button
    :disabled="isSubmitDisabled"
    @click="handleSubmit">
    提交
  </el-button>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', is_finished: 0, disableSelect: false },
        { name: '李四', is_finished: 2, disableSelect: true }
      ],
      finishOptions: [
        { label: '否', value: 0 },
        { label: '是', value: 1 },
        { label: '已处理', value: 2 }
      ],
      isSubmitDisabled: false 
    };
  },
  methods: {
    handleSelectChange(row) {
      if (row.is_finished === 2) {
        row.disableSelect = true;
        this.isSubmitDisabled = true; 
      }
    },
    handleSubmit() { 
      console.log('提交数据');
      this.refreshTableData();
    },
    refreshTableData() {
      this.tableData.forEach(row => {
        if (row.is_finished === 2) {
          row.disableSelect = true;
        }
      });
    }
  }
};
</script>

以上是 vue el-table 内嵌套 select 遇到问题？ 的全部内容， 来源链接： utcz.com/p/935193.html

回到顶部