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

法师-谢双元 / 2023-05-22 / 原文

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

<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>

element_ui 有一个弹出层，主菜单为一个名为新增功能的菜单和一个表格，菜单点击表格新增一行，表格功能有五个字段，分别为：选择人员，角色列表，电话号码，审核列表，操作。选择人员列表是一个表格中嵌套的下拉选择菜单表单，操作列表绑定一下事件，点击删除一行，复制

<template>
  <div>
    <!-- 新增功能菜单 -->
    <el-menu mode="horizontal" @select="handleMenuSelect">
      <el-submenu index="add">
        <template slot="title">新增功能</template>
        <el-menu-item index="addRow">新增一行</el-menu-item>
      </el-submenu>
    </el-menu>
    
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="选择人员">
        <template slot-scope="scope">
          <el-select v-model="scope.row.name" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="role" label="角色列表"></el-table-column>
      <el-table-column prop="phone" label="电话号码"></el-table-column>
      <el-table-column prop="audit" label="审核列表"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      options: [
        { value: '张三', label: '张三' },
        { value: '李四', label: '李四' },
        { value: '王五', label: '王五' },
      ],
    };
  },
  methods: {
    handleMenuSelect(index) {
      if (index === 'addRow') {
        this.tableData.push({
          name: '',
          role: '',
          phone: '',
          audit: '',
        });
      }
    },
    handleDelete(index) {
      this.tableData.splice(index, 1);
    },
  },
};
</script>