如何在vue和element-ui中的table表格实现编辑

效果图如下

 

注意我是用的 dialog 弹窗 写的，大家C过去 记得写控制显示隐藏的visible 属性

<template>
  <el-dialog title="发送邮件" :visible="transmitshow" width="60%" :before-close="handleClose">
    <el-button icon="el-icon-plus" circle type="primary"></el-button>
    <div class="st-table">
      <el-table ref="table" :data="tableList" style="width: 100%" @cell-dblclick="tableDbEdit">
        <el-table-column prop="name" label="收件人地址" width="400">
          <template slot-scope="scope">
            <el-input
              class="inp"
              style="width: 350px"
              size="small"
              v-model="scope.row.name"
              v-if="showInput == `name${scope.row.id}`"
              @blur="blurInput(scope.row.id, 'name', scope.row.name)"
              v-focus
            >
            </el-input>
            <span v-else>{{ scope.row.name }}</span>
            <el-button
              type="primary"
              class="btn"
              size="mini"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
              circle
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column label="备注" width="380" prop="type">
          <template slot-scope="scope">
            <el-input
              size="small"
              v-model="scope.row.type"
              v-if="showInput == `type${scope.row.id}`"
              @blur="blurInput(scope.row.id, 'type', scope.row.type)"
              v-focus
            ></el-input>
            <span v-else>{{ scope.row.type }}</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column width="100">
          <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: 'Transmit',
  props: ['transmitshow'],
  data() {
    return {
      tableList: [
        {
          //表格数据
          id: 0,
          name: '王皮皮',
          title: '在家小霸王，出门小王八',
          type: '中华田园猫'
        },
        {
          id: 1,
          name: '王皮皮',
          title: '在家小霸王，出门小王八',
          type: '中华田园猫'
        }
      ],
      showInput: '',
      oldData: {}
    }
  },
  directives: {
    // 通过自定义指令实现的表单自动获得光标的操作
    focus: {
      inserted: function (el) {
        if (el.tagName.toLocaleLowerCase() == 'input') {
          el.focus()
        } else {
          if (el.getElementsByTagName('input')) {
            el.getElementsByTagName('input')[0].focus()
          }
        }
        el.focus()
      }
    }
  },
  // 方法
  methods: {
    // 当input失去光标后进行的操作
    async blurInput(id, name, value) {
      let obj = {}
      // 判断数据是否有所改变，如果数据有改变则调用修改接口
      if (this.oldData[name] != value) {
        obj[name] = value //被改变的数据
        // 然后再写调用接口，提交内容的东西就可以了
      }
      this.showInput = ''
    },
    /*
			方法参数皆为框架方法的默认传参
			row 	行数据
			column	被点击的触发了方法的单元格
			event	事件
			*/
    tableDbEdit(row, column, event) {
      this.showInput = column.property + row.id
      this.oldData[column.property] = row[column.property]
    },
    handleEdit() {
      this.tableDbEdit()
    },
    handleClose() {
      this.$emit('update:transmitshow', false)
    },
    close() {
      this.$emit('update:transmitshow', false)
    },
    submit() {}
  }
}
</script>
<style lang="less" scoped>
#app {
  width: 1000px;
  margin: 0 auto;
}
.el-table {
  ::v-deep td {
    padding: 5px 0 !important;
  }
  ::v-deep.inp {
    padding: 0 !important;
    margin: 0 !important;
  }
}
.bg-purple {
  float: left;
}
.btn {
  position: absolute;
  position: absolute;
  top: 50%; //距离父元素高度
  right: 0; //距离父元素右边的距离
  transform: translateY(-50%); //垂直居中,向上移动自身距离的50%
}
</style>