如何通过点击按钮来禁用整个表单，其他只读状态？

Question

vuecli + elementUI 目前就是有编辑，保存和取消的按钮
下面一个表单，只有点击编辑按钮，本身的按钮变成禁用状态，其他两个按钮恢复启用，这个表单才可以操作。

反之，点击保存或取消按钮，编辑按钮恢复启用，表单现在是只读状态，也就是整个表单禁用，无法修改。

我尝试用了绑定disabled属性来禁止，但是无一例外，没有达到这种效果，能否指点迷津

Answer 1

按照你要求的逻辑设计好了，我觉得这个还是配合后端接口食用更佳

<template>
  <div class="progress-container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="Date" width="180">
        <template v-slot="scope">
          <span v-if="scope.row.edit === false">{{scope.row.date}}</span>
          <el-input v-model="scope.row.date" v-else></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
      <el-table-column label="operate">
        <template v-slot="scope">
          <el-button type="text" @click="onEdit(scope.row)" :disabled="scope.row.edit">Edit</el-button>
          <el-button type="text" @click="onSave(scope.row)" :disabled="scope.row.save">Save</el-button>
          <el-button type="text" @click="onCancel(scope.row)" :disabled="scope.row.cancel">Cancel</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
export default {
  setup () {
    const tableData = reactive([
      {
        id: 1,
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        edit: false,
        save: true,
        cancel: true
      },
      {
        id: 2,
        date: '2016-05-02',
        name: 'Jery',
        address: 'No. 189, Grove St, Los Angeles',
        edit: false,
        save: true,
        cancel: true
      },
      {
        id: 3,
        date: '2016-05-04',
        name: 'Feany',
        address: 'No. 189, Grove St, Los Angeles',
        edit: false,
        save: true,
        cancel: true
      },
      {
        id: 4,
        date: '2016-05-01',
        name: 'Yuny',
        address: 'No. 189, Grove St, Los Angeles',
        edit: false,
        save: true,
        cancel: true
      },
    ])



    /**编辑 */
    const onEdit = (value) => {
      console.log(value)
      // 接口
      tableData.map(x => {
        if (x.id === value.id) {
          x.edit = true,
            x.save = false,
            x.cancel = false
        }
      })
    }

    /**保存 */
    const onSave = (value) => {
      tableData.map(x => {
        if (x.id === value.id) {
          x.date = value.date
          x.edit = false,
            x.save = true,
            x.cancel = true
        }
      })
    }

    const onCancel = (value) => {
      tableData.map(x => {
        if (x.id === value.id) {
          x.edit = false,
            x.save = true,
            x.cancel = true
        }
      })
    }
    return {
      tableData,
      onEdit,
      onSave,
      onCancel
    }

  }
}
</script>