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使用心得的更多相关文章

  1. 【Java心得总结六】Java容器中——Collection

    在[Java心得总结五]Java容器上——容器初探这篇博文中,我对Java容器类库从一个整体的偏向于宏观的角度初步认识了Java容器类库.而在这篇博文中,我想着重对容器类库中的Collection容器 ...

  2. 【ESRI论坛6周年征文】ArcEngine注记(Anno/ Label/Element等)处理专题 -入门篇

    原发表于ESRI中国社区,转过来.我的社区帐号:jhlong http://bbs.esrichina-bj.cn/ESRI/viewthread.php?tid=122097 ----------- ...

  3. Spring Framework------>version4.3.5.RELAESE----->Reference Documentation学习心得----->关于spring framework中的beans

    Spring framework中的beans 1.概述 bean其实就是各个类实例化后的对象,即objects spring framework的IOC容器所管理的基本单元就是bean spring ...

  4. AngularJS入门心得4——漫谈指令scope

    上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...

  5. AngularJS入门心得1——directive和controller如何通信

    粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...

  6. jquery validate学习心得

    据说,javascript最初的由来就是为了解决表单的验证问题,当然现在的js已经能够用来做各种各样炫酷的效果,不过表单验证一直以来都是js很重要的一个用途(在博客园第一篇博客,不知道说些什么开头~~ ...

  7. Chrome使用技巧(几个月的心得)

    转用Chrome,不仅仅因为它的插件之丰富,更因为它的响应速度其他浏览器都望尘莫及.接着我就要写写一些心得. 如何最简易地用上谷歌搜索? 1,下载hosts文件:https://pan.baidu.c ...

  8. 关于 angular 小心得

    心得1: //控制器里面的代码会晚一些执行 setTimeout(function(){ //获取对象的scope var ele = document.querySelector('[ng-cont ...

  9. AngularJS心得体会

    AngularJS早些时候有过了解,知道这是一个JS的MVC框架,同类型的框架还有Backbone等.这次是由于项目需要,学习了两天的Angular后开始着手改之前的项目代码,这里大概说一下这一周学习 ...

随机推荐

  1. Java语言规范 第3章 词法

  2. aws cli command line interface的安装与使用

    安装 在centos中安装aws cli,安装依赖python,先装好python,然后按下述命令执行 yum install wget wget https://bootstrap.pypa.io/ ...

  3. Codeforces 1107F(dp)

    怎么就没人解释一下为啥用b排序可以保证正确性呢……太菜了,理解了好久. 时间流逝价值会丢失的背包,类似题洛谷1417 本题与洛谷1417不同之处在于流逝是有截止的. 1.这个dp[j]的含义是:最后跑 ...

  4. awk一些简单命令

    最简单地说, AWK 是一种用于处理文本的编程语言工具.AWK 在很多方面类似于 shell 编程语言,尽管 AWK 具有完全属于其本身的语法. 尽管操作可能会很复杂,但命令的语法始终是: awk ' ...

  5. android开发学习 ------- 【转】 android中的单例模式 (详解)

    https://blog.csdn.net/u011418943/article/details/60139644     这篇文章 前因后果 都说出来了 ,值得学习. https://blog.cs ...

  6. Java环境安装与Eclipse安装

    1.jdk下载安装 2.Eclipse下载安装 遇到的问题: 出现问题原因可能有两个:1)没有配置环境变量 2)jdk和eclipse安装的版本不一致,都是64位或者都是32位. 本人出现错误的原因: ...

  7. 学习typescript(一)

    环境 必装软件 node,推荐 node 8.0 npm,推荐 npm 5.0 git, 最新版 vscode, 编绎器 必装包 tsc: npm install -g typescript typi ...

  8. 怎样将python的文件转化为windows的可执行程序

    最近我在刚入手python,其中就学到了怎样将python的py格式文件转化为windows的exe执行程序, 是这样的,首先要创建一个py文件,这里给截图吧 接下来就以这个python文件为例创建一 ...

  9. ScrollView中嵌套ListView时,listview高度显示的问题

    方法一:直接更改listview的控件高度,动态获取(根据条目和每个条目的高度获取) 前几天因为项目的需要,要在一个ListView中放入另一个ListView,也即在一个ListView的每个Lis ...

  10. DataPicker以及TimePicker显示时间和日期(屏幕上显示)

    public class MainActivity extends Activity { private DatePicker date_picker;private TimePicker time_ ...