主要记录在使用element-ui的table表格遇到的一些问题：
- 汇总怎么放到首行？
- 汇总怎么设置哪些要统计？
- 设置固定高度后，汇总不显示要怎么显示出来？
- 表头的多选框如果要加全选怎么实现？
- 如果table中有多选框选择事件，要怎么过滤出能选择的列表？
- table怎么设置内容水平居中？
一、效果
二、实现过程
2.1 汇总怎么放到首行？
<style>
/* ::v-deep 为深度操作符，可以穿透到子组件 */
.listTable ::v-deep .el-table {
display: flex;
flex-direction: column;
}
/* order默认值为0，只需将表体order置为1即可移到最后，这样合计行就上移到表体上方 */
.listTable ::v-deep .el-table__body-wrapper {
order: 1;
}
</style>
2.2 汇总怎么设置哪些要统计？
//汇总
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = "汇总";
return;
} else if (index == 4 || index == 5) {
const values = data.map((item) =>
Number(item[column.property])
);
if (!values.every((value) => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
if (index === 5) {
sums[index] =
"￥" +
Number(sums[index])
.toFixed(2)
.toString()
.replace(/(?!^)(?=(\d{3})+\.)/g, ",");
} else if (index === 4) {
sums[index] = Number(sums[index]) + "笔";
}
} else {
sums[index] = "";
}
}
});
return sums;
},
2.3 设置固定高度后，汇总不显示要怎么显示出来？
<template>
<el-table
ref="userTable"
@selection-change="slectRow"
:row-key="getRowKeys"
:cell-class-name="cellcb"
height="500"
>
</el-table>
</template>
<script>
export default {
updated() {
//解决table设置固定高度后，汇总不显示问题
this.$nextTick(() => {
this.$refs.userTable.doLayout();
});
}
}
</script>
2.4 表头的多选框如果要加全选怎么实现？
用伪类给多选框后面加文字‘全选’，elementui的table中，多选框没有属性可添加文本，所以只能通过伪类添加
<style>
.listTable
::v-deep
.el-table__header
.el-table-column--selection
.cell
.el-checkbox:after {
content: "全选";
color: #909399;
font-size: 12px;
margin-left: 5px;
font-weight: bold;
}
</style>
效果如下：
2.5 如果table中有多选框选择事件，要怎么过滤出能选择的列表？
参考文档：element.eleme.cn/#/zh-CN/com…
思路：
- 给列表的每一列加类名，然后类名里加样式，控制多选框的显示、隐藏
- 停用的列表数据只是用样式隐藏了多选框，点击全选的时候还是会选择停用的数据，所以要过滤出状态为正常的列表数据
<template>
<el-table
@selection-change="slectRow"
:row-key="getRowKeys"
:cell-class-name="cellcb"
>
</el-table>
</template>
<script>
export default {
methods: {
//控制多选框的显示隐藏
cellcb(row) {
if (row.row.status !== "正常" && row.columnIndex === 0) {
return "myCell";
}
},
//多选框选择事件
slectRow(rows) {
/**
* 停用的列表数据只是用样式隐藏了多选框，点击全选的时候还是会选择停用的数据，
* 所以要过滤出状态为正常的列表数据
*/
this.selectedIdArr = rows.filter((elem, index, array) => {
return elem.status === "正常";
});
console.log(this.selectedIdArr);
},
}
}
</script>
<style>
.listTable ::v-deep .myCell > .cell .el-checkbox__inner {
display: none;
}
</style>
2.5 table怎么设置内容水平居中？
<style>
//table内容水平居中
.listTable ::v-deep .el-table th.is-leaf,
.listTable ::v-deep .el-table .cell {
text-align: center;
}
//设置汇总的样式
.listTable ::v-deep .el-table__footer .has-gutter tr td {
font-size: small;
font-weight: bold;
color: #f56c6c !important;
}
</style>
3 完整代码
<template>
<div class="tableDemo">
<el-card
:body-style="{
padding: '20px',
minHeight: 'calc(100vh - 100px)',
}"
>
<div class="listTable">
<el-table
:data="tables"
size="mini"
stripe
@selection-change="slectRow"
:row-key="getRowKeys"
:cell-class-name="cellcb"
show-summary
sum-text="汇总"
:summary-method="getSummaries"
>
<el-table-column
type="selection"
width="65"
:reserve-selection="true"
></el-table-column>
<el-table-column
label="ID"
prop="id"
width="80"
></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column
label="手机号码"
prop="mobile"
></el-table-column>
<el-table-column
label="消费笔数"
prop="account"
></el-table-column>
<el-table-column
label="累计"
prop="amount"
></el-table-column>
<el-table-column label="状态" prop="status">
<template slot-scope="{ row }">
<el-tag :type="getStatusTag(row.status)">{{
row.status
}}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
</div>
</template>
<script>
export default {
name: "tableDemo",
components: {},
data() {
return {
tables: [
{
id: 1,
name: "小张",
mobile: "13548523654",
status: "正常",
account: 2,
amount: 30,
},
{
id: 2,
name: "小李",
mobile: "13548523654",
status: "停用",
account: 5,
amount: 62,
},
{
id: 3,
name: "小红",
mobile: "13548523654",
status: "正常",
account: 5,
amount: 390,
},
{
id: 4,
name: "小黄",
mobile: "13548523654",
status: "停用",
account: 20,
amount: 530,
},
],
selectedIdArr: [],
};
},
methods: {
getRowKeys(row) {
return row.id;
},
//汇总
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = "汇总";
return;
} else if (index == 4 || index == 5) {
const values = data.map((item) =>
Number(item[column.property])
);
if (!values.every((value) => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
if (index === 5) {
sums[index] =
"￥" +
Number(sums[index])
.toFixed(2)
.toString()
.replace(/(?!^)(?=(\d{3})+\.)/g, ",");
} else if (index === 4) {
sums[index] = Number(sums[index]) + "笔";
}
} else {
sums[index] = "";
}
}
});
return sums;
},
//多选框选择事件
slectRow(rows) {
/**
* 停用的列表数据只是用样式隐藏了多选框，点击全选的时候还是会选择停用的数据，
* 所以要过滤出状态为正常的列表数据
*/
this.selectedIdArr = rows.filter((elem, index, array) => {
return elem.status === "正常";
});
console.log(this.selectedIdArr);
},
//控制多选框的显示隐藏
cellcb(row) {
if (row.row.status !== "正常" && row.columnIndex === 0) {
return "myCell";
}
},
//状态
getStatusTag(type) {
switch (type) {
case "正常":
return "blue";
break;
case "停用":
return "danger";
break;
default:
break;
}
},
},
created() {},
};
</script>
<style lang="scss" scoped>
.listTable ::v-deep .myCell > .cell .el-checkbox__inner {
display: none;
}
.listTable ::v-deep .cell .el-checkbox__inner {
border: 1px solid #9e9ea0;
}
.listTable
::v-deep
.el-checkbox__input.is-checked
.el-checkbox__inner {
border: 1px solid #f2783c;
background-color: #f2783c;
}
.listTable ::v-deep .is-indeterminate .el-checkbox__inner {
border: 1px solid #f2783c;
background-color: #f2783c;
}
//用伪类给多选框后面加文字‘全选’，elementui的table中，多选框没有属性可添加文本，所以只能通过伪类添加
.listTable
::v-deep
.el-table__header
.el-table-column--selection
.cell
.el-checkbox:after {
content: "全选";
color: #909399;
font-size: 12px;
margin-left: 5px;
font-weight: bold;
}
//table内容水平居中
.listTable ::v-deep .el-table th.is-leaf,
.listTable ::v-deep .el-table .cell {
text-align: center;
}
//设置汇总的样式
.listTable ::v-deep .el-table__footer .has-gutter tr td {
font-size: small;
font-weight: bold;
color: #f56c6c !important;
}
/* ::v-deep 为深度操作符，可以穿透到子组件 */
.listTable ::v-deep .el-table {
display: flex;
flex-direction: column;
}
/* order默认值为0，只需将表体order置为1即可移到最后，这样合计行就上移到表体上方 */
.listTable ::v-deep .el-table__body-wrapper {
order: 1;
}
</style>
