Element + 列表增删改查

Table.vue

<template>
  <div class="main">
    <el-table
      :data="tableData"
      style="width: 100%">

      <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"><!--  slot-scope="scope" 这里取到当前单元格  -->
            <el-button type="primary" icon="el-icon-edit" @click="toUpdate(scope)" circle></el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="下拉菜单编辑">
        <template slot-scope="scope">  <!--  slot-scope="scope" 这里取到当前单元格  -->
            <el-dropdown size="medium" split-button type="primary" @command="handleCommand">
                更多
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="add">增加</el-dropdown-item>
                    <el-dropdown-item command="delete" @click.native="doDelete(scope)" >删除</el-dropdown-item>
                    <el-dropdown-item command="edit" @click.native="doEdit(scope)">编辑{{scope.$index}}</el-dropdown-item>
                    <el-dropdown-item command="sheng">上升</el-dropdown-item><!-- scope.row 这里取到当前单元格text值  -->
                    <el-dropdown-item command="jiang">下降</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <!--        模态框-->
    <el-dialog :title="title" :visible.sync="dialogVisible" @close="closeDialog('dialogForm')" width="30%" height="50%">

        <el-form :model="dialogForm" ref="dialogForm">
            <el-form-item label="类别名称" prop="name">
                <el-input v-model="dialogForm.name" clearable></el-input>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveAddForm('dialogForm')">确 定</el-button>
        </div>
    </el-dialog>
  </div>

  </template>

  <script>
    import moment from 'moment'
    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 弄'
          }],
          dialogForm: {
              index: 0,
              name: ''
          },
          dialogVisible: false,
          title: "事件修改",
        }
      },
      methods:{
        toUpdate(scope){

          console.log('scope'+scope)

        },
        handleEdit(index, row){
          console.log('index'+index,'row'+row)

        },
        handleCommand(command) {
          // command 判断点击的是下拉菜单哪一个按钮
          // 但是这里并不知道点击的事哪一行
          //this.$message('click on item ' + command);

          if (command==='add') {
            this.tableData.push({
              date: moment().format("YYYY-MM-DD"),
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄'
            })
          }
          else if (command==='delete') {
            console.log("command==='delete'")//不允许空方法
          }
        },
        doDelete(scope){
          //console.log(scope.$index)
          this.tableData.splice(scope.$index, 1)
        },
        doEdit(scope){
          console.log(scope.$index,scope.row.name)
          this.dialogVisible = true
          this.dialogForm={
            index: scope.$index,
            name: scope.row.name
          }
        },
        saveAddForm(){
          this.tableData[this.dialogForm.index].name = this.dialogForm.name;
          this.dialogVisible = false;
        },
        closeDialog(){
          this.dialogVisible = false;
        }

      }
    }
  </script>