ELEMENT整删整改

- 日理万妓 2022-10-18 00:54 85阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70][]

<template>
      <div class="demo">
        <el-table
          :data="tableData"
        >
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="edit(scope)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button @click="add">新增</el-button>
        <el-dialog
          :title="dialogTitle"
          :visible.sync="dialogVisible"
          width="30%"
        >
          <ul>
            <li>
              <span>姓名</span>
              <el-input v-model="dialogName" placeholder="请输入姓名" />
            </li>
            <li>
              <span>地址</span>
              <el-input v-model="dialogAddress" placeholder="请输入地址" />
            </li>
          </ul>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </span>
        </el-dialog>
    
      </div>
    </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 弄'
              }
            ],
            dialogVisible: false,
            dialogTitle: '',
            dialogName: '',
            dialogAddress: '',
            editIndex: null
          }
        },
        created() {
        },
        methods: {
          add() {
            this.dialogTitle = '新增'
            this.editIndex = null
            this.dialogName = ''
            this.dialogAddress = ''
            this.dialogVisible = true
          },
          edit(scope) {
            this.editIndex = scope.$index
            this.dialogName = scope.row.name
            this.dialogAddress = scope.row.address
            this.dialogTitle = '编辑'
            this.dialogVisible = true
          },
          submit() {
            // editIndex 为 null 表示新增 否则表示编辑
            if (this.editIndex === null) { 
              this.tableData.push({
                name: this.dialogName,
                address: this.dialogAddress,
                date: new Date().valueOf()
              })
            } else {
              const row = this.tableData[this.editIndex]
              row.date = new Date().valueOf()
              row.name = this.dialogName
              row.address = this.dialogAddress
              this.tableData.splice(this.editIndex, 1, row)
            }
            this.dialogVisible = false
          }
        }
      }
    </script>
    <style lang="scss" scoped>
    .demo {
      padding: 200px 100px;
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70]: /images/20221014/b0b3a47298544982a9b76ddc8212daa7.png