ivew table render自定义内容使用

需求：表头添加自定义的图表，且点击的时候触发事件，然后点击table中的表格时，显示该表格其他自定义内容，且内容需要判断开控制显示还是影藏

参考文档 ：https://note.youdao.com/ynoteshare1/index.html?id=47e12219a125a3838448a13fc830f5d9&type=note

<template>
  <div style="margin-top: 40px">
    <Table border :columns="columns1" :data="data1"></Table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      type: 0, //0 取消排序 1正序 2 倒叙
      count: 0,
      columns1: [
        {
          title: "Age",
          key: "age",
          renderHeader: (h, params) => {
            return h("div", [
              h("span", "排序"),
              h("Icon", {
                props: { type: "ios-arrow-dropup-circle" },
                style: {
                  fontSize: "20px",
                  verticalAlign: "bottom",
                },
                on: {
                  click: () => {
                    this.count++;
                    console.log(this.count);
                    if (this.count % 3 === 0) {
                      this.state = 0;
                    } else if (this.count % 3 == 2) {
                      this.state = 2;
                    } else if (this.count % 3 == 1) {
                      this.state = 1;
                    }
                    console.log(this.count + "----------------" + this.state);
                    console.log("xxxxxxxxxxxxxx");
                  },
                },
              }),
            ]);
          },
        },
        {
          title: "Age",
          key: "age",
          render(h, params) {
            return h("div", [
              h(
                "Poptip",
                {
                  props: {
                    transfer: true,
                    placement: "right-start",
                    width: "400",
                    trigger: "hover",
                  },
                },
                [
                  h(
                    "span",
                    {
                      style: {
                        color: "red",
                      },
                    },
                    "我的信息"
                  ),
                  h(
                    "div",
                    {
                      slot: "content",
                      class: "api",
                      style: {
                        textAlign: "left",
                      },
                    },
                    [
                      h("p", params.row.age),
                      h("br"),
                      h(
                        "p",
                        {
                          style: {
                            // display:'none',
                            display: (function () {
                              console.log(params.row.answer1=="");
                              if (params.row.answer1 == "") {
                                console.log("xxxxxxxxxxxxxxxx");
                                return "none";
                              }
                            })(),
                          },
                        },
                        [
                          h("Checkbox", {
                            props: { value: true },
                          }),
                          h("span", params.row.answer1),
                        ]
                      ),
                      h("br"),
                      h("p", [
                        h("Checkbox", {
                          props: { value: true },
                        }),
                        h("span", params.row.answer2),
                      ]),
                      h("br"),
                      h(
                        "Button",
                        {
                          style: {
                            marginRight: "5px",
                          },
                          props: {
                            type: "primary",
                            size: "small",
                          },
                          on: {
                            click: (e) => {
                              e.stopPropagation();
                              //this.remove(params.index)
                            },
                          },
                        },
                        "确定"
                      ),
                      h(
                        "Button",
                        {
                          props: {
                            type: "default",
                            size: "small",
                          },
                          on: {
                            click: (e) => {
                              e.stopPropagation();
                              //this.remove(params.index)
                            },
                          },
                        },
                        "取消"
                      ),
                    ]
                  ),
                ]
              ),
            ]);
          },
        },
        {
          title: "Address",
          key: "address",
        },
      ],
      data1: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03",
          answer1: "",
          answer2: "我的答案我的答案我的答案22",
          answer3: "",
          answer4: "",
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01",
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02",
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04",
        },
      ],
    };
  },
};
</script>