门户网站模板源码下载,徐州手机网站建设公司哪家好,做免费互动小游戏的网站,门户网站要求目录 一.自定义合计行
二.合计行不展示#xff0c;只有缩放/变大窗口或者F12弹出后台时才展示
三.合计行出现了表格滚动条下方
四.合计行整体样式的修改
五.合计行单元格样式修改
1.css
2.jsx方式
六.合计行单元格合并 一.自定义合计行
通过 show-summary 属性开启合计…目录 一.自定义合计行
二.合计行不展示只有缩放/变大窗口或者F12弹出后台时才展示
三.合计行出现了表格滚动条下方
四.合计行整体样式的修改
五.合计行单元格样式修改
1.css
2.jsx方式
六.合计行单元格合并 一.自定义合计行
通过 show-summary 属性开启合计行功能通过 :summary-method 属性自定义合计行方法。 el-table :summary-methodgetSummaries show-summary reftable/el-table getSummaries(param) {// columns 是一个数组,每一项就是每一列表头的内容// data 是表格数据,每一项就是每一行 row 的数据const { columns, data } param;// sums 是合计行的数据,是一个普通数组,数组每一项内容就是合计行按照顺序展示的内容const sums [];columns.forEach((column, index) {// 这里是设置合计行第一列内容位 总计,也可以根据 index 判断, if (index 0)if (column.property trade_id) {sums[index] 合计;} else if (// 这里是自己需要合计的表头,也可以根据 index 判断,但是为了防止以后顺序打乱,就用 prop 去判断column.property trade_power ||column.property trade_fee) {// values 是该表头下所有数据组成的数组const values data.map((item) Number(item[column.property]));// 这是把数组的所有值都相加再一起,Utils方法是自己定义引入的避免精度缺失的方法,博客别的内容有写sums[index] values.reduce((prev, cur) {return Utils.argAdd(Number(prev), Number(cur));}, 0);} else {// 这里不需要合计的表头 设置展示内容为 ---sums[index] ---;}});return sums;}, 二.合计行不展示只有缩放/变大窗口或者F12弹出后台时才展示
不展示的原因是因为表格刚开始是没有数据的所以不展示合计行等获取到数据的时候表格不会重新渲染dom所以该合计行还是不展示缩放窗口或者弹出后台时会导致页面重新渲染此时合计行才会渲染出来。
解决方法在获取数据以后调用 el-table 的 doLayout() 方法去重新渲染表格 dom。 queryTableDataApi(params).then((res) {this.allTableData res;this.$nextTick(() {this.$refs[table].doLayout();});}); 或者 updated() {this.$nextTick(() {this.$refs[table].doLayout();});}, 三.合计行出现了表格滚动条下方
原本合计行在表格下部我们可以将合计行放在表格上部也就是第一行。
::v-deep .el-table {display: flex;flex-direction: column;
}
/* order默认值为0只需将表格主体order设为1即可移到最后合计就上移到最上方了 */
::v-deep .el-table__body-wrapper {order: 1;
}
// 下面的代码是设置 fixed 后要根据实际情况所作的修改
::v-deep.el-table__fixed-body-wrapper {top: 96px !important;
}
::v-deep .el-table__fixed-footer-wrapper {z-index: 0;
} 四.合计行整体样式的修改
::v-deep .el-table .el-table__footer-wrapper tbody td {background: black;color: white;font-weight: bolder;
} 五.合计行单元格样式修改
1.css
比较死板因为要根据 nth-child(n) 去固定在某一列进行生效如果顺序改变就会出现错误。
::v-deep .el-table .el-table__footer-wrapper tbody td:nth-child(3) {color: lightgreen;font-weight: bolder;
}::v-deep .el-table .el-table__footer-wrapper tbody td:nth-child(4) {color: red;font-weight: bolder;
}
2.jsx方式
合计行自定义方法中返回 jsx。 getSummaries(param) {const { columns, data } param;const sums [];columns.forEach((column, index) {if (column.property trade_id) {sums[index] 合计;} else if (column.property trade_power ||column.property trade_fee) {const values data.map((item) Number(item[column.property]));let value values.reduce((prev, cur) {return Utils.argAdd(Number(prev), Number(cur));}, 0);// 在这里设置类名sums[index] span class{green}{value}/span;} else {sums[index] ---;}});return sums;},
.green {color: lightgreen;font-weight: bolder;
} 六.合计行单元格合并 watch: {showTableData: {immediate: true,handler() {setTimeout(() {const tds document.querySelectorAll(.el-table__footer-wrapper trtd);tds[0].colSpan 2;tds[0].style.textAlign center;tds[1].style.display none;}, 0);},},},
