码迷,mamicode.com
首页 > 其他好文 > 详细

element使用心得

时间:2018-11-03 17:38:56      阅读:352      评论:0      收藏:0      [点我收藏+]

标签:load   spi   选中   float   data   element   label   tooltip   lte   

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 文件


  &lt;el-card :class="projectType==='2'?'box-card cardTable':'box-card'" style="float: left; width: 44%;"&gt;
    &lt;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"&gt;&lt;/el-input&gt;
    &lt;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"&gt;
      &lt;el-table-column
        prop="itemName"
        show-overflow-tooltip
        label="检测指标名称"&gt;
      &lt;/el-table-column&gt;
    &lt;/el-table&gt;
  &lt;/el-card&gt;
  &lt;style&gt;
  .current-row td {
    background: #8be9f3 !important;
  }
  &lt;/style&gt;
  //如果要使用 scoped 的style,需要指定该表格的父级元素
  &lt;style scoped&gt;
  .cardTable &gt;&gt;&gt; .current-row td {
    background: #8be9f3 !important;
  }
  &lt;/style&gt;

Table 常用方法解释

toggleSelection(row,[true|false]),多选表格,切换选中状态??


        
{
    //正常的复选框选中取消操作
    toggleSelection(rows) {
        if (rows) {
          rows.forEach(row =&gt; {
            this.$refs.multipleTable.toggleRowSelection(row,true);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
    }
    //注意:multipleTable为table的ref属性,toggleRowSelection方法第二个参数 true|false 决定复选框是否选中,如果不设第二个参数则为toggle开关
    
    //上述方法不能改变复选框状态时采用下面方法
    this.$nextTick(function () {
      arr.forEach(row=&gt;{
          this.$refs.multipleTable.toggleRowSelection(row);
      })
    })
}
            

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

element使用心得

标签:load   spi   选中   float   data   element   label   tooltip   lte   

原文地址:https://www.cnblogs.com/lalalagq/p/9901144.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!