vue项目中，基于iview扩展表头

• 表格功能描述

  • iview表格排序，多选搜索
  • 扩展文本、日历搜索表头

• 基本实现思路

  定义初始列信息如下：

  columns1: [
          {
            type: "selection",
            width: 60,
            align: "center"
          },
          {
            title: "姓名",
            key: "name",
            fieldType: "1"
          },
          {
            title: "年龄",
            key: "age",
            sortable: true
          },
          {
            title: "地址",
            key: "address",
            filters: [
              {
                label: "New York",
                value: "New York"
              },
              {
                label: "London",
                value: "London"
              },
              {
                label: "Sydney",
                value: "Sydney"
              }
            ],
            filterMethod(value, row) {
              return row.address.indexOf(value) > -1;
            }
          },
          {
            title: "日期",
            key: "date",
            fieldType: "2"
          }
        ]
  

  扩展表头：

  //queryColumns 列数据
  this.$set(queryColumns, "renderHeader", h => {});
  

• 代码

  <template>
    <Table :columns="columns2" :data="nowData1"></Table>
  </template>
  <script>
  export default {
    name: "MyTable",
    data() {
      return {
        columns2: [],
        searchVal: {
          name: "",
          date: ""
        },
        columns1: [
          {
            type: "selection",
            width: 60,
            align: "center"
          },
          {
            title: "姓名",
            key: "name",
            fieldType: "1"
          },
          {
            title: "年龄",
            key: "age",
            sortable: true
          },
          {
            title: "地址",
            key: "address",
            filters: [
              {
                label: "New York",
                value: "New York"
              },
              {
                label: "London",
                value: "London"
              },
              {
                label: "Sydney",
                value: "Sydney"
              }
            ],
            filterMethod(value, row) {
              return row.address.indexOf(value) > -1;
            }
          },
          {
            title: "日期",
            key: "date",
            fieldType: "2"
          }
        ],
        nowData1: [],
        data1: [
          {
            name: "John Brown",
            age: 18,
            address: "New York No. 1 Lake Park",
            date: "2019-08-03"
          },
          {
            name: "Jim Green",
            age: 24,
            address: "London No. 1 Lake Park",
            date: "2019-08-01"
          },
          {
            name: "Joe Black",
            age: 30,
            address: "Sydney No. 1 Lake Park",
            date: "2019-08-02"
          },
          {
            name: "Jon Snow",
            age: 26,
            address: "Ottawa No. 2 Lake Park",
            date: "2019-08-04"
          }
        ]
      };
    },
    created() {
      this.col();
      this.nowData1 = this.data1;
    },
    methods: {
      col() {
        for (let item in this.columns1) {
          this.setColumnSearch(this, this.columns1[item]);
          this.columns2.push(this.columns1[item]);
        }
      },
      queryList() {
        let date = this.searchVal.date;
        let name = this.searchVal.name;
        if (name === "" && date === "") {
          this.nowData1 = this.data1;
        } else {
          this.nowData1 = this.data1.filter(function(item) {
            if (name === "") {
              return item.date === date;
            } else {
              return item.name === name;
            }
          });
        }
      },
      setColumnSearch(thisObj, queryColumns) {
        if (!queryColumns) return;
        //   fieldType 1 input搜索，2 时间控件搜索
        if (
          queryColumns.fieldType &&
          (queryColumns.fieldType === "1" || queryColumns.fieldType === "2")
        ) {
          this.$set(queryColumns, "renderHeader", h => {
            if (queryColumns.fieldType === "2") {
              return h("span", {}, [
                h("span", queryColumns.title),
                h("Poptip", { props: { placement: "bottom", transfer: true } }, [
                  h(
                    "Icon",
                    { props: { type: "md-calendar" } },
                    queryColumns.title
                  ),
                  [
                    h("span", { slot: "content" }, [
                      h("DatePicker", {
                        props: {
                          type: "date",
                          formate: "yyyy-mm-dd",
                          size: "small",
                          placement: "bottom-end",
                          confirm: true,
                          clearable: true
                        },
                        on: {
                          "on-change": function(data) {
                            thisObj.searchVal.date = data;
                          },
                          "on-ok": function() {
                            // 触发查询事件
                            thisObj.queryList();
                          },
                          "on-clear": function() {
                            // 触发查询事件
                            thisObj.searchVal.date = "";
                            thisObj.queryList();
                          }
                        }
                      })
                    ])
                  ]
                ])
              ]);
            } else {
              return h("span", {}, [
                h("span", queryColumns.title),
                h("Poptip", { props: { placement: "bottom", transfer: true } }, [
                  h(
                    "Icon",
                    { props: { type: "ios-search-outline" } },
                    queryColumns.title
                  ),
                  h("div", { slot: "content" }, [
                    h(
                      "Row",
                      {
                        props: {
                          gutter: 0
                        }
                      },
                      [
                        h(
                          "Col",
                          {
                            props: {
                              span: "12"
                            }
                          },
                          [
                            h(
                              "Icon",
                              {
                                props: {
                                  type: "ios-funnel"
                                },
                                style: {
                                  marginRight: "5px"
                                }
                              },
                              h("span", "筛选")
                            )
                          ]
                        ),
                        h(
                          "Col",
                          {
                            props: {
                              span: "12"
                            },
                            style: {
                              textAlign: "right"
                            }
                          },
                          [
                            h(
                              "Button",
                              {
                                props: {
                                  type: "text",
                                  size: "small"
                                },
                                style: {
                                  background: "none",
                                  bosShadow: "none",
                                  marginBottom: "3px",
                                  color: "#1565c0"
                                },
                                on: {
                                  click: function() {
                                    document.querySelector(
                                      `div[ref=${queryColumns.title}]`
                                    ).children[2].value = "";
                                    thisObj.searchVal.name = "";
                                    //  触发查询事件
                                    thisObj.queryList();
                                  }
                                }
                              },
                              "重置"
                            )
                          ]
                        )
                      ]
                    ),
                    h("Input", {
                      attrs: {
                        ref: queryColumns.title
                      },
                      props: {
                        search: true,
                        placeholder: ""
                      },
                      on: {
                        "on-search": function(data) {
                          thisObj.searchVal.name = data;
                          //  触发查询事件
                          thisObj.queryList();
                        }
                      }
                    })
                  ])
                ])
              ]);
            }
          });
        }
      }
    }
  };
  </script>
  
  

• 效果