iView表格自定义展开、render函数的使用

iView版本3.0、因为展开的样式不太符合预期、只能自定义。

之前一直习惯使用template、render渲染函数使用很少、这次算是简单的认识下、代码写的不好大佬们不要见怪！

效果图

完整代码

<template><div>render函数自定义iview表格<Tableclass="renderTable"stripedisabled-hover:columns="columns":data="dataList"></Table></div>
</template><script>
import lodash from "lodash";
export default {components: {},data() {return {result: {code: 200,status: 1,message: "请求成功",data: {tableData: [[{num: "销售计划额",time: null,},{num: "1005461.34",time: "第一季度",},{num: "2025024.60",time: "第二季度",},{num: "370051.00",time: "第三季度",},{num: "10203138.36",time: "第四季度",},{num: "13603675.30",time: null,},],[{num: "预计销售总额",time: null,},{num: "0",time: "第一季度",},{num: "949",time: "第二季度",},{num: "0",time: "第三季度",},{num: "30",time: "第四季度",},{num: "979",time: null,},],[{num: "未中标额",time: null,},{num: "0",time: "第一季度",},{num: "0",time: "第二季度",},{num: "0",time: "第三季度",},{num: "0",time: "第四季度",},{num: "0",time: null,},],[{num: "预计成单额",time: null,},{num: "0",time: "第一季度",},{num: "97",time: "第二季度",},{num: "0",time: "第三季度",},{num: "0",time: "第四季度",},{num: "97",time: null,},],[{num: "实际合同额",time: null,},{num: "33",time: "第一季度",},{num: "31107",time: "第二季度",},{num: "12791",time: "第三季度",},{num: "240",time: "第四季度",},{num: "44173",time: null,},],[{num: "偏差额",time: null,},{num: "-1003106.80",time: "第一季度",},{num: "-1993917.60",time: "第二季度",},{num: "-357260.00",time: "第三季度",},{num: "-203149.00",time: "第四季度",},{num: "-13559502.30",time: null,},],[{num: "偏差率",time: null,},{num: "-99.7700%",time: "第一季度",},{num: "-98.4600%",time: "第二季度",},{num: "-96.5400%",time: "第三季度",},{num: "-1.9900%",time: "第四季度",},{num: "-30696.36%",time: null,},],],tableTitle: [{num: "季度",time: "季度",},{num: "第一季度",time: "第一季度",},{num: "第二季度",time: "第二季度",},{num: "第三季度",time: "第三季度",},{num: "第四季度",time: "第四季度",},{num: "合计",time: null,},],},bussId: null,},titleName: "季度",iconType: "ios-arrow-down",columns: [],dataList: [],};},computed: {},mounted() {this.publicFun(this.result);},watch: {},methods: {columsfun() {this.columns.forEach((item, index) => {item.render = (h, param) => {if (param.row.action0 === "预计销售总额" &&param.column.title === this.titleName) {return h("div", [h("span",{style: {cursor: "pointer",},on: {click: () => {if (this.dataList[2].action0 === "未中标额") {this.dataList.splice(2, 1);this.iconType = "ios-arrow-down";} else {this.dataList.splice(2, 0, this.otherData);this.iconType = "ios-arrow-up";}},},},param.row.action0),h("Icon", {props: {type: this.iconType,},on: {click: () => {if (this.dataList[2].action0 === "未中标额") {this.dataList.splice(2, 1);this.iconType = "ios-arrow-down";} else {this.iconType = "ios-arrow-up";this.dataList.splice(2, 0, this.otherData);}},},}),]);} else if (param.row.action0 === "实际合同额" &&param.column.title === this.titleName) {return h("div", {}, param.row[`action${index}`]);} else if (param.row.action0 === "未中标额" &&param.column.title === this.titleName) {return h("div", {}, param.row[`action${index}`]);} else if (this.dataList.length === 6 &&param.index !== 0 &&param.index !== 2 &&param.index !== 4 &&param.index !== 5 &&param.index !== 6) {return h("div",{class: "active",on: {click: () => {if (param.row.action0 === "实际合同额") {this.$router.push({name: "render",});} else {this.$router.push({name: "render",});}},},style: {cursor: "pointer",textDecoration: "underline",},},param.row[`action${index}`]);} else if (this.dataList.length === 7 &&param.index !== 0 &&param.index !== 3 &&param.index !== 5 &&param.index !== 6) {return h("div",{class: "active",on: {click: () => {if (param.row.action0 === "实际合同额") {this.$router.push({name: "render",});} else {this.$router.push({name: "render",});}},},style: {cursor: "pointer",textDecoration: "underline",},},param.row[`action${index}`]);} else {return h("div", param.row[`action${index}`]);}};});},publicFun(da) {if (da.code === 200) {this.dataList = [];da.data.tableData.forEach((item, index) => {var obj = {};item.forEach((test, i) => {obj[`action${i}`] = test.num;});this.dataList.push(obj);});this.otherData = lodash.cloneDeep(this.dataList[2]);this.dataList.splice(2, 1);this.columns = da.data.tableTitle.map((item, index) => {let obj = {};if (item.num === "月份") {obj = {title: item.num,slot: "action0",width: 130,align: "center",};} else {obj = {title: item.num,key: "action" + index,width: da.data.tableTitle.length > 18,align: "center",};}return obj;});this.columsfun();}},},
};
</script><style lang="less" scoped>
.renderTable {width: 100%;
}
.active {color: cadetblue;
}
</style>

iView表格自定义展开、render函数的使用相关推荐

el-table 树形表格自定义展开图标_实践一个树形组件
想实践一个树形组件的起因是发现目前主流UI库在树形组件上都没有提供连接线(ant design有,但不知道为什么设计得发虚,就是各元素之间没有严格衔接上,见下图,而Vue生态圈中的Element UI ...
el-table 树形表格自定义展开图标_[shell脚本]表格数据在终端可视化输出
最终效果 1. 自定义表格样式 2. 自定义主题颜色支持三系普通颜色支持16色彩虹色支持单颜色回顾一下shell语法 1. shell传递参数我们可以在执行shell脚本时实时传递参数从而指 ...
el-table 树形表格自定义展开图标_Windows图标美化指南，从内到外焕然一新
之前出过一期win10美化的文章反响还不错,但篇幅原因很多模块没有展开说.这次详细介绍一下Windows各种图标的替换美化教程供大家折腾.文末提供图标资源和涉及到的工具,所有图标都可复原,放心折腾! ...
el-table 树形表格自定义展开图标_耍好控件 | 产品图标体系是如何炼成的？
温馨提示:建议阅读时间9分钟.文末还为大家准备了网易云音乐Android视觉规范一份,进行学习与参考,记得领取哦~ 前不久我在讲标签栏专题的时候,有聊到过一次图标(可回顾:<了解图标落地,让前端 ...
el-table 树形表格自定义展开图标_IconJar for Mac(图标素材设计软件)
IconJar for Mac是一款Mac平台上非常优秀的图标素材设计软件.IconJar for Ma设计风格质朴.功能实用,使用方法简单,拖入式导入即可.IconJar Mac能够浏览设计资源文件 ...
el-table 树形表格自定义展开图标_Icon Slate for mac(图标制作工具) v4.5.0
Synthesia mac版是Mac os平台上的一款帮助用户快速制作logo的Mac图标制作软件,Icon Slate for mac是一款让您轻松创建,输入和输出多种格式电脑和移动终端程序图标的图 ...
el-table 树形表格自定义展开图标_iOS 14自定义桌面太美了手把手教你重温青春...
近日有粉丝朋友留言,想要知道iOS14如何更改APP图标.相信不少朋友,之前已经在网上看过不少关于 iOS14桌面美化的介绍,酷似曾经的装扮QQ空间.由于 iOS14更改APP图标过于简单,今天小编就 ...
el-table 树形表格自定义展开图标_Fences: 正版桌面图标自动整理栅栏工具非Steam版...
Fences 是知名开发商 Stardock 为 Windows 用户打造的一款经典的桌面管理工具.Fences 通过在桌面自由创建可命名的半透明区域给图标分组,并且在你不需要时隐藏它们.Fences ...
el-table 树形表格自定义展开图标_超级好用，如何上传自制图标到iSlide图标库...
iSlide有很多被忽略的好功能比如上传功能用户可上传本地文件到 iSlide图片库.图标库,上传成功的文件可一键插入PPT,图片插入不变形所有上传的素材仅自己可见大家常用的是图片上传却很少 ...

iView表格自定义展开、render函数的使用

iView表格自定义展开、render函数的使用相关推荐

最新文章

热门文章