<template>
  <div id="app">
  <el-table
    ref="multipleTable"
    :data="tableData3"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">

    <el-button @click="delMulData()">批量刪除</el-button>
    <el-button @click="addData()">增加資料</el-button>
  </div>
</div>

</template>
 

<script>
  export default {
    name: 'app',
    data() {
      return {
        tableData3: [{
          rowNum:1,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          rowNum:2,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          rowNum:3,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          rowNum:4,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          rowNum:5,
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          rowNum:6,
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          rowNum:7,
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
    },

    methods: {
      //正常情況下是需要彈出一個dialog輸入資料的，這裡我們只是模擬一下實現方法
      //注意因為我們新增的是固定rowNum，所以批量刪除的時候新增的會一樣，正式程式碼中不會存在類似情況
      addData(){
        var data={
          romNum:100,
          date:'2018-12-3',
          name:'當白',
          address:'鄭州市二七區'
        }
        this.tableData3.unshift(data)

      },



      delMulData(){
        //拿到選中的資料
        let val = this.multipleSelection
        //如果選中資料存在
        if(val){
            //將選中資料遍歷
            val.forEach((val,index) =>{
              //遍歷源資料
              this.tableData3.forEach((v,i)=>{
                //如果選中資料和源資料的某一條唯一識別符號相等，刪除對應的源資料
                if(val.rowNum === v.rowNum){
                  this.tableData3.splice(i,1)
                }
              })
          })
        }
        //清除選中狀態
        this.$refs.multipleTable.clearSelection()

      },


      //得到選中資料
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>