element ui Table表格自定义列模板结合Dialog弹框 编辑表格每一行的内容

Table表格部分

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);//这里可打印出每行的内容 
        //点击编辑
        this.dialogFormVisible = true //显示弹框
         let _row = row
         //将每一行的数据赋值给Dialog弹框（这里是重点）
        this.editForm = Object.assign({},_ row) // editForm是Dialog弹框的data
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>

Dialog 弹框部分

<div>
           <el-button type="text" v-if = "dialogFormVisible"></el-button>

                  <el-dialog title="编辑" :visible.sync="dialogFormVisible">
					// :model="editForm"绑定的数据
                    <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
                          
                        <form>
                            <table class="table">
                                <tr>
                                      <td><span>用户名:</span> <input type="text"   v-model="editForm.username" placeholder="请输入用户名"></td>
                                      <td><span> 姓名:</span><input type="text"   v-model="editForm.name" placeholder="请输入姓名"></td>
                                </tr>
                                 <tr class="department">
                                      <td><span>工号:</span><input type="text"   v-model="editForm.userId" placeholder="请输入工号" ></td>
                                  <td><span>年龄:</span>  <input type="text"   v-model="editForm.age" placeholder="请输入年龄" onkeyup = "value=value.replace(/[^\d]/g,'')"></td>
                               
                                </tr>
                                 
                                <tr>
                                 
                                  <td><span> 手机号:</span> <input type="tel"   v-model="editForm.phone" placeholder="请输入手机号" maxlength="11" onkeyup = "value=value.replace(/[^\d]/g,'')"></td>
                                  <td><span>座机:</span> <input type="tel"   v-model="editForm.mobile" placeholder="请输入座机" onkeyup = "value=value.replace(/[^\d]/g,'')"></td>

                                </tr> 
                                <tr>
                                  <td><span>邮箱:</span> <input type="email"   v-model="editForm.email" placeholder="请输入邮箱"></td>
                                  <td><span>保密等级:</span> <input type="text"   v-model="editForm.name" placeholder="请输入盒机"></td>

                                </tr>
                             
                                 <tr>
                                  <td><span> 备注:</span><input type="tel"   v-model="editForm.remarks" placeholder="请输入备注"></td>
                                </tr>      
                                 
                            </table>

                        </form>                               

                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                    </div>
                  </el-dialog>