目录
1、表格列求和
2、表格列标记序号
3、悬浮显示其他内容
4、文字过多在一行以省略号显示，悬浮显示全部内容
5、表格loading
6、表格样式
7、自定义内容
8、bug
一、求和
Element表格提供了一个show-summary属性，添加之后就会在表格尾部展示合计行。
默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。
可以自定义合计逻辑，使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中
显示所有列的和
<el-table :data="goodsList" border stripe highlight-current-row tooltip-effect="dark"
style="width: 100%" show-summary >
<el-table-column prop="goodsNumber" label="商品编号" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="goodsName" label="商品名称" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="retailPrice" label="指导零售价" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="orderAmount" label="数量" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="actualPriceSubtotal" label="实付金额" align="center" show-overflow-tooltip></el-table-column>
</el-table>
显示指定列(一列或多列)的和
<el-table :data="goodsList" border stripe highlight-current-row tooltip-effect="dark"
style="width: 100%" show-summary :summary-method="getSummaries">
<el-table-column prop="goodsNumber" label="商品编号" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="goodsName" label="商品名称" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="retailPrice" label="指导零售价" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="orderAmount" label="数量" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="actualPriceSubtotal" label="实付金额" align="center" show-overflow-tooltip></el-table-column>
</el-table>
data
countPrice: null, // 合计金额,从后台获取后赋值
methods
getSummaries (param) {
const { columns, data } = param;
let sums = [];
columns.forEach((column, index) => {
// 判断属性，将'合计'文字放置的位置
if (column.property === "orderAmount") {
sums[index] = '实付合计:';
}
// 合计金额
if (column.property === "actualPriceSubtotal") {
sums[index] = '￥' + this.countPrice
}
});
return sums;
}
二、标记序号
1、页面表格列添加type="index" :index="index"
<el-table-column type="index" :index="index" label="序号" width="80" align="center" ></el-table-column>
2、在methods中定义方法index,通过分页计算当前序号
index (val) {
return (当前页数-1) * 分页条数 + val + 1
},
三、悬浮显示其他内容
<el-table-column
label="姓名"
width="180">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>悬浮显示内容，可以添加事件</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">显示内容</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
四、文字过长以省略号显示
1、el-table标签添加属性tooltip-effect="dark"
2、el-table-column标签添加属性show-overflow-tooltip
五、表格loading
el-table标签添加属性,并且以tableLoading变量控制开关
v-loading="tableLoading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.8)"
六、表格样式
1、行高
.el-table__header tr,
.el-table__header th {
padding: 0;
height: 40px;
}
.el-table__body tr,
.el-table__body td {
padding: 0;
height: 35px;
}
七、自定义内容
<el-table :data="goodsList" border style="width: 100%" >
<el-table-column label="时间" align="center" min-width="100">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.time"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</template>
</el-table-column>
</el-table>
八、bug
1、在table和tab一起使用的时候，如果有固定列，固定列中会多出一个下划线。
我的办法是把固定列去掉了，我的表格没有那么宽。
