Element UI
裴嘉靖
学而不思则罔 思而不学则殆
展开
-
七、表尾合计:
1、<el-table>的show-sumary属性:设置是否显示表尾合计。2、<el-table>的sum-text属性:设置合计行第一个单元格的文本。3、<el-table>的summary-method属性:取值为函数,函数返回值为数组。例:统计年龄的平均值,其他列不进行统计。 summaryMethod({columns,data}){ ...原创 2020-05-05 22:05:47 · 877 阅读 · 0 评论 -
六、筛选:也叫作“过滤”。
1、启动对列数据取值的筛选:(1)使用<el-table-column>标记对的filters属性:取值是对象数组。 <el-table-column prop=“sex” :filters=“[{},{}]”> {text:‘男生’,value:‘男’},{text:‘女生’,value:‘女’} text - 设置在筛选框出现的文本提示。 valu...原创 2020-05-05 22:04:45 · 980 阅读 · 0 评论 -
二、表格行的单选:
1、<el-table>的属性:highlight-current-row功能:设置是否高亮显示(选中行)当前行。2、<el-table>的方法:setCurrentRow(row)功能:将参数指定的行作为当前行。若省略参数,则将选中的行取消选中状态。例:通过按钮将表格中的第三行设置为高亮显示。 <el-button @click=“btnClick”...原创 2020-05-05 22:01:50 · 246 阅读 · 0 评论 -
一、基础表格:
1、标记对:<el-table>、<el-table-column>2、显示基础表格:(1)利用<el-table>标记对的data属性(JSON数组)注入数据。(2)利用<el-table-column>标记对的prop属性设置列数据字段名。(3)利用<el-table-column>标记对的label属性指定表头文本。(4)...原创 2020-05-05 21:59:26 · 722 阅读 · 0 评论 -
四、表格的自定义模板和展开行:
表格的自定义模板和展开行1、自定义模板:(1)在<el-table-column>标记对内部使用<template>标记对。(2)在自定义模板中使用 作用域插槽: //重点:可以实现展开行,sc功能强大,可以获取任意行和列的数据 <el-table-column> <template slot-scope=...原创 2020-05-05 21:14:07 · 848 阅读 · 0 评论 -
客户管理表格
<!--客户管理表格--> <el-row> <el-col :span="18" :offset="3"> <el-table :data="clientData.slice(pageNumber * (currentChangeIndex - 1),pageNumber * currentChangeIndex)"...原创 2020-05-05 20:56:10 · 631 阅读 · 0 评论 -
三、Element UI 表格行的多选
1、开启多选功能:新增一列,并将其type属性设置为selection。 <el-table-column type=“selection”></el-table-column>2、<el-table>的select-on-indeterminate属性:【逻辑值】当有部分行被选中时,单击“全选”功能,此时对其他复选框的解决方案。select-o...原创 2020-05-05 20:54:56 · 3923 阅读 · 0 评论