vue el-table 加 el-form

vue el-table 加 el-form 是Vue.js框架中常用的组件。el-table组件用于展示表格数据，el-form组件用于创建表单。通过将el-table和el-form结合使用，可以在表格中添加表单元素，实现更复杂的数据操作和交互功能。

在使用el-table和el-form时，可以通过以下步骤来实现表格与表单的结合：
1. 在Vue组件中引入el-table和el-form组件，并在模板中使用它们。
2. 在el-table中使用el-table-column组件来定义表格的列，同时可以在列中添加el-form-item组件，用于展示和编辑表单元素。
3. 在el-form-item中使用el-input、el-select等组件来创建表单元素，可以通过v-model指令来实现数据的双向绑定。
4. 通过监听表单的提交事件，可以获取表单数据并进行相应的处理。

示例代码如下所示：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="性别" prop="gender"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-form-item>
            <el-button @click="edit(scope.row)">编辑</el-button>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible">
      <el-form :model="formData" ref="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="formData.age"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="formData.gender">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        name: '张三',
        age: 18,
        gender: '男'
      }, {
        name: '李四',
        age: 20,
        gender: '女'
      }],
      dialogVisible: false,
      formData: {}
    };
  },
  methods: {
    edit(row) {
      this.formData = Object.assign({}, row);
      this.dialogVisible = true;
    },
    save() {
      // 提交表单数据的逻辑处理
      // ...
      this.dialogVisible = false;
    }
  }
};
</script>