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

Question

如下代码我在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的值，直接禁用了，而且提交按钮也给禁用了，如下图：

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

Answer 1

<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>

Answer 2

这个问题似乎是由于您在选择后直接更改了row.is_finished的值，导致select和提交按钮都被禁用了。如果您希望在选择后仅更改select的禁用状态，而不影响其他操作，您可以尝试将v-model绑定到不同的数据属性上，而不是直接绑定到row.is_finished。

以下是一个可能的解决方案：

<template v-slot:is_finished="{ row }">  <el-select v-model="isSelected" 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>

在上面的代码中，我将v-model绑定到isSelected而不是row.is_finished。然后，您可以在handleGetFinished方法中获取选中的值，并根据需要更新其他数据属性或执行其他操作。

在提交数据时，您可以使用isSelected的值来决定是否禁用提交按钮或其他相关操作。例如，您可以根据isSelected的值来禁用提交按钮：

<template>  <el-button :disabled="isSelected == null || isSelected == 2">提交</el-button></template>

通过将v-model绑定到不同的数据属性上，您可以更好地控制各个组件的状态，并避免不必要的相互影响。