<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    //1.復選框選中的一旦有變化，就會觸發這個函數，函數能夠把選中的多行數據打包成對象數組
    @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="toggleSelection([tableData[1], tableData[2]])">切換第二、第三行的選中狀態</el-button>
    <el-button @click="toggleSelection()">取消選擇</el-button>
  </div></template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
    },


    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      //2.val值，被選中的對象數組信息存放在val中
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

<el-table
        :data="tableData"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange">
        border
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序號" type="index" width="50">
        </el-table-column>
        <el-table-column prop="username" label="用戶名" width="120">
        </el-table-column>
        <el-table-column prop="nickName" label="用戶昵稱" width="120">
        </el-table-column>
        <el-table-column prop="roleName" label="權限列表" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="gmtCreate"
          label="創建時間"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="gmtModified"
          label="更新時間"
          show-overflow-tooltip
        >
        </el-table-column>
        <!--配置， 修改，刪除 -->
        <el-table-column label="操作" show-overflow-tooltip>
          <template slot-scope="{ row, $index }">
            <el-button
              icon="el-icon-user-solid"
              type="info"
              size="mini"
              @click="changeUserRole(row)"
            ></el-button>
            <el-button
              icon="el-icon-edit"
              size="mini"
              type="primary"
              @click="changeUsername(row)"
            ></el-button>
            <el-button
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click = "deleteUser(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
<script>
export default {
  data() {
    return {
      
      tableData: [],
      username: "",
      tableShow: true,
      addUserFormVisible: false,
      form: {
        username: "",
        nickName: "",
        password: "",
      },
      userIdList: [],
      changeUsernameVisible: false,
      checkAll: false,
      userId: ''
    };
  },
  method:{
    handleSelectionChange(val){
      for(let i=0;i<val.length;i++){
        this.userIdList[i] = val[i].id
      }
     
    }
}