Vue Element Table 表格

Element Table 表格  

本示例以 Vue Element Admin 項目爲基礎，介紹 Element Table 表格控件


1、/src/views/table.vue

<template>
  <div class="app-container">
    <el-table
      ref="multipleTable"
      :data="tableData"
      :default-sort="{prop: 'date', order: 'descending'}"
      highlight-current-row
      stripe
      border
      style="width: 100%"
      @current-change="handleCurrentChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="index" :index="indexMethod" label="序號" align="center" width="50"></el-table-column>
      <el-table-column width="55">
        <template slot-scope="scope">
          <el-radio v-model="tableRadio" :label="scope.row">
            <i></i>
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column type="selection" align="center" width="55"></el-table-column>
      <el-table-column prop="date" label="日期" sortable width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" sortable width="180"></el-table-column>
      <el-table-column prop="address" label="地址" :formatter="formatter"></el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
        </template>
      </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>
      <el-button @click="setCurrent()">單選取消選擇</el-button>
    </div>
  </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 弄"
        }
      ],
      tableRadio: "",
      currentRow: null,
      multipleSelection: []
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, JSON.stringify(row));
    },
    handleDelete(index, row) {
      console.log(index, JSON.stringify(row));
    },
    formatter(row, column) {
      return `${row.address} 拼接字符串`;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    setCurrent(row) {
      this.$refs.multipleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;

      //單選按鈕選中的值
      this.tableRadio = val;
      console.log(`radio：${JSON.stringify(this.tableRadio)}`);
    },
    handleSelectionChange(val) {
      //   begin
      //   用複選框實現單選【每次只能有一個被選中】
      //   if (val.length > 1) {
      //     this.$refs.multipleTable.clearSelection();
      //     this.$refs.multipleTable.toggleRowSelection(val.pop());
      //   }
      //   end

      //複選框選中的值
      this.multipleSelection = val;
      console.log(`check：${JSON.stringify(this.multipleSelection)}`);
    },
    indexMethod(index) {
      return index + 1;
    }
  }
};
</script>

2、/src/api/table.js

3、服務端 API 接口返回 json 數據
*
*
*