element使用心得

Posted 2021-01-17

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);
      })
    })
}
            

原文地址：https://segmentfault.com/a/1190000016716629