[element ui] 動態表格 / 多選框時翻頁記住之前選擇的數據等

1 、簡單版

<template>
  <el-table :data="tableDemo.table" style="width: 100%">
    <el-table-column :prop="v.prop" :label="v.label" :width="v.width" v-for="(v, k) in tableDemo.header" :key="k"></el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "tableDemo",
  data() {
    return {
      tableDemo: {
        table: [
          {
            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 弄"
          }
        ],
        header: [
          { label: "日期", prop: "date", width: "" },
          { label: "姓名", prop: "name", width: "" },
          { label: "地址", prop: "address", width: "" }
        ]
      }
    };
  }
};
</script>

2、靈活版

<template>
  <el-table :data="tableDemo.table" style="width: 100%">
    <el-table-column :label="v.label" :width="v.width" v-for="(v, k) in tableDemo.header" :key="k">
      <template slot-scope="scope">
        <div v-if="!v.isStatus">{{scope.row[v.prop]}}</div>
        <div v-else>
          <el-tag :type="scope.row[v.prop] | isTypeColor">{{scope.row[v.prop] | isType}}</el-tag>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" size="small">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "tableDemo",
  data() {
    return {
      tableDemo: {
        table: [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀區金沙江路 1518 弄",
            status: 0
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀區金沙江路 1517 弄",
            status: 1
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀區金沙江路 1519 弄",
            status: 2
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀區金沙江路 1516 弄",
            status: 0
          }
        ],
        header: [
          { label: "日期", prop: "date", width: "", isStatus: false },
          { label: "姓名", prop: "name", width: "", isStatus: false },
          { label: "地址", prop: "address", width: "", isStatus: false },
          { label: "狀態", prop: "status", width: "", isStatus: true }
        ]
      }
    };
  },
  methods: {
    handleClick(rowData) {
      console.log(rowData);
    }
  },
  filters: {
    isType(type) {
      let txt = "";
      switch (Number.parseInt(type)) {
        case 0:
          txt = "正常";
          break;
        case 1:
          txt = "異常";
          break;
        case 2:
          txt = "未知";
          break;
      }
      return txt;
    },
    isTypeColor(type) {
      let color = "";
      switch (Number.parseInt(type)) {
        case 0:
          color = "success";
          break;
        case 1:
          color = "danger";
          break;
        case 2:
          color = "info";
          break;
      }
      return color;
    }
  }
};
</script>

3、表格多選，多選框時翻頁記住之前選擇的數據 :reserve-selection=“true”

<template>
	<el-table :data="tableData" :row-key="setRowKey" @selection-change="handleSelectionChange">
	    <el-table-column type="selection" :reserve-selection="true"></el-table-column>
	    <el-table-column prop="name" label="姓名"></el-table-column>
	    <el-table-column prop="address" label="地址"></el-table-column>
	</el-table>
</template>

<script>
export default {
  name: "tableDemo",
  data() {
    return {
        tableData: [
          { id: 1, date: "2016-05-02", name: "王小虎", address: "上海市普陀區金沙江路 1518 弄" },
          { id: 2, date: "2016-05-04", name: "王小虎", address: "上海市普陀區金沙江路 1517 弄" }
        ]
	}
  },
  methods: {
    setRowKey(row) {
      return row.id
    },
    handleSelectionChange (data) {
      console.log(data)
    }
  }
};
</script>