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

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

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

效果图

 

 完整代码

<template>
  <div>
    render函数自定义iview表格
    <Table
      class="renderTable"
      stripe
      disabled-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>