element使用心得

Table

---

Table 經常使用屬性解釋

數據過濾，filter過濾器

<el-table-column
  width="200"
  show-overflow-tooltip
  label="檢測指標">
  <template slot-scope="scope">
    {{ scope.row.projects | getIndex }}
  </template>
</el-table-column>

//上述，使用 Vue 的過濾器，可是在表格中沒法直接使用table的prop屬性，須要在template裏面添加過濾器。

show-overflow-tooltip，超出部分隱藏，懸停顯示

<el-table-column
width="200"
show-overflow-tooltip
label="檢測指標">
<template slot-scope="scope">

{{ scope.row.projects | getIndex }}

</template>
</el-table-column>
//開啓表格行屬性show-overflow-tooltip

highlight-current-row，高亮當前行

xxx.vue 文件

<el-card :class="projectType==='2'?'box-card cardTable':'box-card'" style="float: left; width: 44%;">
    <el-input
      size="mini"
      clearable
      prefix-icon="el-icon-search"
      v-show="itemBool"
      v-model.trim="itemName"
      placeholder="請輸入指標名稱"
      style="width: 40%"
      @change="queryItemList"
      @keyup.enter.native="queryItemList"></el-input>
    <el-table
      v-loading="loading3"
      element-loading-text="拼命加載中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :highlight-current-row="true"
      :data="indexNameList" stripe
      @cell-click="clickItem"
      style="width: 100%;height: 400px;"
      max-height="400">
      <el-table-column
        prop="itemName"
        show-overflow-tooltip
        label="檢測指標名稱">
      </el-table-column>
    </el-table>
  </el-card>
  <style>
  .current-row td {
    background: #8be9f3 !important;
  }
  </style>
  //若是要使用 scoped 的style，須要指定該表格的父級元素
  <style scoped>
  .cardTable >>> .current-row td {
    background: #8be9f3 !important;
  }
  </style>

Table 經常使用方法解釋

toggleSelection(row,[true|false]),多選表格，切換選中狀態

{
    //正常的複選框選中取消操做
    toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row,true);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
    }
    //注意：multipleTable爲table的ref屬性，toggleRowSelection方法第二個參數 true|false 決定複選框是否選中，若是不設第二個參數則爲toggle開關
    
    //上述方法不能改變複選框狀態時採用下面方法
    this.$nextTick(function () {
      arr.forEach(row=>{
          this.$refs.multipleTable.toggleRowSelection(row);
      })
    })
}