封装tabs切换更新表格

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <el-tabs v-model="where.type" @tab-click="handleClick(where.type)">
        <el-tab-pane
          v-for="item in list"
          :key="item.id"
          :label="item.label"
          :name="item.id"
        >
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 表格 -->
    <ele-pro-table
      ref="table"
      :where="where"
      :datasource="url"
      :columns="columns"
      :parseData="parseData"
      :selection.sync="selection"
    >
    </ele-pro-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { label: "首页广告", id: "0" },
        { label: "我的页面广告", id: "1" }
      ],
      // 表格数据接口
      url: "?s=Manage.Setting_Ads.Page",
      // 表格列配置
      parseData: res => {
        return {
          code: res.code === 200 ? 0 : res.code,
          data: res.data.data,
          count: res.data.count
        };
      },
      columns: [
        {
          prop: "title",
          label: "标题",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: "created_at",
          label: "时间",
          align: "center",
          // sortable: "custom",
          showOverflowTooltip: true,
          minWidth: 160,
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(
              cellValue * 1000,
              "yyyy-MM-dd HH:mm:ss"
            );
          }
        }
      ],
      // 表格搜索条件
      where: {
        type: "0"
      },
      // 表格选中数据
      selection: [],
    };
  },
  methods: {
    handleClick(tab, aaaas) {
      this.where.type = tab;
      this.reload();
    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({
        page: 1
      });
    },
    /* 重置搜索 */
    reset() {
      this.where = {};
      this.$nextTick(() => {
        this.reload();
      });
    }
  }
};
</script>