ant 表格 动态合并 渲染 动态数据 渲染dom 使用for if 等

需求 页面使用ant表格 根据数据动态合并行 且数据动态渲染各种样式

{
          title: "数据标题",
          align: "center",
          width: 110,
          dataIndex: "studyImportant",
          //自定义表头 需删除title 且插槽写为title
          scopedSlots: { title: "title" }
          customRender: (text, row) => {
            if (row.courseType === "a" || row.courseType === "c") { //判断是否渲染
              return { attrs: { colSpan: 0 } }; //不渲染时返回一个attrs{colSpan 为0时不渲染}
            } else {
              let listDataSplit = row.knowledgeContents.split(";"); //将返回字符串转换为数组
              var listData = new Array();//新建数组
              //如果渲染的需要动态图片 可以将数据搞成数组对象
              for (let item in listDataSplit) {
              //循环写标签 需要判断是写if
                listData.push(<a-menu-item key="x">{listDataSplit[item]}</a-menu-item>);
              }
              //引入图片 图片需要动态渲染时写为对象
              var img = require("../../assets/images/image.png");
              return {
              //这里同样可以写合并或者不合并
                children: (
                //children内要用{}写定义的数据
                //不可以写:v-if 或者:v-for
                  <div class="stuimp_Box">
                    <span>{listData[0]} </span>
                    <a-dropdown
                      getPopupContainer={triggerNode => {
                        return triggerNode.parentNode || document.body;
                      }}
                      trigger="['click']"
                      placement="bottomRight"
                    >
                      <a class="ant-dropdown-link">
                        <img src={img} alt="" class="more" />
                      </a>
                      <a-menu slot="overlay">{listData}</a-menu>
                    </a-dropdown>
                  </div>
                )
              };
            }
          }
        },

表格行事件监听
data里

      rowClick: record => {
        return {
          on: {
            // 事件
            click: event => {
              console.log(record, "行案件");
              if (this.disabled) {
                if (record.resources == "ALL") {
                  this.selected = [];
                  menuList.map(item => {
                    if (item.children) {
                      this.selected.push(item.auth);
                      item.children.map(cont => this.selected.push(cont.auth));
                    } else {
                      this.selected.push(item.auth);
                    }
                  });
                  console.log(this.selected);
                } else {
                  this.selected = record.resources.split(";");
                }
              } // 点击行
            }
          }
        };
      },

html里

<a-table :customRow="rowClick"/>
<!--官网 https://www.antdv.com/components/table-cn/-->
<a-table :customRow={(record) => {
    return {
      props: {
        xxx... //属性
      },
      on: { // 事件
        click: (event) => {},       // 点击行
        dblclick: (event) => {},
        contextmenu: (event) => {},
        mouseenter: (event) => {},  // 鼠标移入行
        mouseleave: (event) => {}
      },

    };
  )}
  customHeaderRow={(column) => {
    return {
      on: {
        click: () => {},        // 点击表头行
      }
    };
  )}
  />