element_ui根据编辑和查看打开不同的弹出层

功能描述：  
有一个表格，有三个字段，分别为：操作，姓名，日期，在操作字段数据为：有二个种类型，一个是编辑，一个查看，点出编辑和查看打开弹出层，弹出层显示表格，姓名，时间，操作，单击编辑菜单弹出可以编辑，单击查看，只能可查看弹出层的表格

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)">编辑</el-button>
          <el-button @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑弹出层 -->
    <el-dialog title="编辑" :visible.sync="editDialogVisible">
      <el-form label-position="top">
        <el-form-item label="姓名">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker v-model="editForm.date" type="date"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </el-dialog>

    <!-- 查看弹出层 -->
    <el-dialog title="查看" :visible.sync="viewDialogVisible">
      <el-table :data="[viewForm]">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="date" label="日期"></el-table-column>
      </el-table>
      <div slot="footer">
        <el-button @click="viewDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', date: '2023-05-20' },
        { name: '李四', date: '2023-05-21' },
        { name: '王五', date: '2023-05-22' }
      ],
      editDialogVisible: false,
      viewDialogVisible: false,
      editForm: {
        name: '',
        date: ''
      },
      viewForm: {}
    }
  },
  methods: {
    handleEdit(row) {
      // 弹出编辑弹出层
      this.editForm = Object.assign({}, row)
      this.editDialogVisible = true
    },
    handleView(row) {
      // 弹出查看弹出层
      this.viewForm = Object.assign({}, row)
      this.viewDialogVisible = true
    },
    handleSave() {
      // 保存编辑结果
      const index = this.tableData.findIndex(item => item.name === this.editForm.name)
      this.tableData.splice(index, 1, this.editForm)
      this.editDialogVisible = false
    }
  }
}
</script>