做一个el-table点击按键编辑实例

好的，您需要在Vue中安装element-ui，并使用el-table组件实现表格的显示。然后，您需要在el-table的列上添加编辑按钮，当用户点击编辑时，触发编辑事件，将该行的数据显示在弹出的编辑框中。最后，用户可在编辑框中修改数据，并点击保存按钮将修改后的数据保存到表格中。代码示例如下：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column width="150" label="Operation">
      <template slot-scope="scope">
        <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog :visible.sync="dialogVisible">
    <el-form ref="form" :model="editedItem" label-width="100px">
      <el-form-item label="Name">
        <el-input v-model="editedItem.name"></el-input>
      </el-form-item>
      <el-form-item label="Age">
        <el-input v-model.number="editedItem.age"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">Cancel</el-button>
      <el-button type="primary" @click="save">Save</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { getPageList, deleteItem } from '@/api/api';
  import { Message } from 'element-ui';

  export default {
    data() {
      return {
        tableData: [],
        dialogVisible: false,
        editedItem: {},
        editIndex: -1
      }
    },
    created() {
      this.fetchList();
    },
    watch: {
      dialogVisible(val) {
        if(!val) {
          this.$refs['form'].resetFields();
        }
      }
    },
    methods: {
      fetchList() {
        getPageList(this.pagination.pageNum, this.pagination.pageSize).then(({data}) => {
          this.tableData = data;
        });
      },
      handleEdit(index, row) {
        this.editIndex = index;
        this.editedItem = Object.assign({}, row);
        this.dialogVisible = true;
      },
      save() {
        this.$refs['form'].validate(valid => {
          if(valid) {
            this.tableData.splice(this.editIndex, 1, this.editedItem);
            this.dialogVisible = false;
            Message.success('Success');
          }
        });
      }
    }
  }
</script>