<el-button type="primary" size="mini" @click="editById(scope.$index, scope.row)" disabled="false">编辑</el-button>,当scope.row.state=2或3时禁用按钮

可以通过在按钮上绑定一个计算属性来实现这个功能。首先，你需要在数据中添加一个用于存储状态的字段，比如 `state`。然后，你可以在计算属性中根据这个状态来决定按钮是否应该被禁用。例如：

<el-button type="primary" size="mini" @click="editById(scope.$index, scope.row)" :disabled="isButtonDisabled(scope.row.state)">编辑</el-button>

data() {
  return {
    // ...
    states: [0, 1, 2, 3], // 所有状态值的数组
  }
},
methods: {
  editById(index, row) {
    // ...
  },
  isButtonDisabled(state) {
    // 如果状态是 2 或 3，返回 true，否则返回 false
    return [2, 3].includes(state)
  },
},

在这个例子中，`isButtonDisabled` 方法接收一个状态值作为参数，如果这个值等于 2 或 3，就返回 `true`，否则返回 `false`。在模板中，我们使用 `:disabled` 属性将这个计算属性绑定到按钮上，这样每次状态发生变化时，按钮就会自动禁用或启用。

相关问题

vue中的form表单打开编辑按钮，打开el-dialog弹窗，怎样默认拿到当行的id，而不用我们手动输入

要默认获取当前行的id，可以在打开弹窗的时候，将当前行的id作为参数传递给弹窗组件，在弹窗组件中使用props来接收这个id，然后在表单中设置一个隐藏的input，将这个id赋值给这个input的value属性，这样就可以在提交表单时将这个id一起提交了。

具体的做法如下：

1. 在列表中每一行的编辑按钮上绑定一个点击事件，将当前行的id作为参数传递给弹窗组件：

<template>
  <div>
    <el-table :data="list">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button type="primary" @click="openEditDialog(scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="编辑" :visible.sync="dialogVisible">
      <edit-form :id="currentId" />
    </el-dialog>
  </div>
</template>

<script>
import EditForm from './EditForm.vue'
export default {
  components: {
    EditForm
  },
  data() {
    return {
      list: [],
      dialogVisible: false,
      currentId: null
    }
  },
  methods: {
    openEditDialog(id) {
      this.currentId = id
      this.dialogVisible = true
    }
  }
}
</script>

2. 在弹窗组件中使用props接收id，并将其赋值给隐藏的input：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="ID" prop="id">
      <el-input v-model="form.id" disabled></el-input>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      form: {
        id: null,
        name: ''
      }
    }
  },
  watch: {
    id(newVal) {
      this.form.id = newVal
    }
  },
  mounted() {
    this.form.id = this.id
  }
}
</script>

在弹窗组件中，我们定义了一个form对象，其中包含了id和name两个属性，我们将id设置为了null，并在mounted钩子函数中将其赋值为从props接收到的id。同时，我们在watch中也监听了id的变化，并在变化时将其赋值给form对象中的id属性。

在表单中，我们使用了el-input组件来展示id和name属性，并将其绑定到form对象的对应属性上。其中，id属性我们设置为了disabled，表示该input不可编辑。这样，我们就可以在弹窗中默认获取到当前行的id了。

vue elementui实现可编辑表格 点击表格上方编辑按钮 编辑完表格数据 再点保存按钮把数据发送给后端 数据怎么绑定 按钮不在表格里

实现可编辑表格可以使用 ElementUI 的 el-table 和 el-input 组件结合使用，具体的代码实现可以参考以下示例：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" prop="name">
        <template slot-scope="{ row }">
          <el-input v-model="row.name" :disabled="!row.edit"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="年龄" prop="age">
        <template slot-scope="{ row }">
          <el-input v-model="row.age" :disabled="!row.edit"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="地址" prop="address">
        <template slot-scope="{ row }">
          <el-input v-model="row.address" :disabled="!row.edit"></el-input>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="{ row }">
          <el-button type="primary" v-if="!row.edit" @click="editRow(row)">编辑</el-button>
          <el-button type="success" v-if="row.edit" @click="saveRow(row)">保存</el-button>
          <el-button type="danger" v-if="row.edit" @click="cancelEdit(row)">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="addRow">新增</el-button>
    <el-button type="success" @click="saveTableData">保存</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 20,
          address: '北京市海淀区'
        },
        {
          name: '李四',
          age: 25,
          address: '上海市浦东区'
        },
        {
          name: '王五',
          age: 30,
          address: '广州市天河区'
        }
      ]
    }
  },
  methods: {
    editRow(row) {
      row.edit = true
    },
    saveRow(row) {
      row.edit = false
    },
    cancelEdit(row) {
      row.edit = false
    },
    addRow() {
      this.tableData.push({
        name: '',
        age: '',
        address: '',
        edit: true
      })
    },
    saveTableData() {
      const data = JSON.stringify(this.tableData)
      // 发送数据给后端
      console.log(data)
    }
  }
}
</script>

在上面的代码中，我们使用 el-table-column 的 slot-scope 属性来自定义表格单元格的内容，其中 el-input 组件用来实现可编辑内容的输入，同时使用 v-model 指令来绑定数据。在最后两个 el-button 按钮中，一个用来新增表格行，一个用来保存表格数据，保存数据时，我们可以将表格数据转换成 JSON 格式的字符串后发送给后端。