博客

问题

在之前的基础上重写表格Poptip组件，实现表格元素可排序，以及远程获取表格数据

自定义Poptip模块组件

// poptip.vue
<template>
  <Poptip trigger='hover' :placement="placement" :transfer="true" width="600" @on-popper-show="getData">
    <p>{{rowData.totalCount}}</p>
    <div slot='content' style="max-height: 800px; overflow:auto;">
      <table cellspacing="0" style="width: 100%; text-align: center; border: 1px solid rgb(220,222,226); border-collapse:collapse;">
        <tr>
          <th v-for="(item, idx) in tableTitle" v-bind:key="item.title" style="border: 1px solid rgb(220,222,226); padding: 10px 0;">
            <span @click="handleTitleClick(item, idx)">{{item.title}}</span>
            <span class="ivu-table-sort" v-if="item.sortable">
              <i class="ivu-icon ivu-icon-md-arrow-dropup" @click="handleTitleClick(item, idx, 'asc')" v-bind:class="{ on: item.sortType === 'asc' }"></i>
              <i class="ivu-icon ivu-icon-md-arrow-dropdown" @click="handleTitleClick(item, idx, 'desc')" v-bind:class="{ on: item.sortType === 'desc' }"></i>
            </span>
          </th>
        </tr>
        <tr v-if="rowData.totalCount === 0">
          <td style="border: 1px solid rgb(220,222,226); padding: 10px 0;" colspan="2">暂无数据</td>
        </tr>
        <tr v-else v-for="item in insideTableData" v-bind:key="item.path">
          <td style="border: 1px solid rgb(220,222,226); padding: 10px 0;">{{item.path}}</td>
          <td style="border: 1px solid rgb(220,222,226); padding: 10px 0;">{{item.count}}</td>
        </tr>
      </table>
    </div>
  </Poptip>
</template>

<style lang="less">
  @import './table-stylesheet.less';
</style>

<script>
/**
 * @description 自定义弹出框，显示表格内容
 */
export default {
  name: 'boardRecordList',
  data () {
    return {
      insideTableData: [],
      hasGetData: false,
      tableTitle: [
        {
          title: '入口',
          key: 'path',
          sortable: false
        },
        {
          title: '次数',
          key: 'count',
          sortable: true,
          sortType: 'normal'
        }
      ]
    }
  },

  props: {
    /**
     * @description 表格行数据
     */
    rowData: {
      type: Object,
      default () {
        return {}
      }
    },
    /**
     * @description 弹出位置
     */
    placement: {
      type: String,
      default () {
        return 'bottom'
      }
    },
    /**
     * @description 是否为远程搜索模式
     */
    remoteMode: {
      type: Boolean,
      default () {
        return false
      }
    },
    /**
     * @description 获取远程数据
     */
    fetchData: {
      type: Function,
      default () {
        return () => {}
      }
    },
    /**
     * @description 获取远程数据成功回调函数
     */
    fetchDataSuccess: {
      type: Function,
      default () {
        return []
      }
    }
  },

  methods: {
    /**
     * @description 表格标题点击事件，用于选择排序方式
     */
    handleTitleClick (item, idx, type = 'normal') {
      if (item.sortable) {
        if (type === 'normal') {
          switch (item.sortType) {
            case 'normal':
              item.sortType = 'asc'
              break
            case 'asc':
              item.sortType = 'desc'
              break
            case 'desc':
              item.sortType = 'normal'
              break
            default:
              item.sortType = 'normal'
          }
        } else {
          item.sortType = type
        }
        this.handleTableSort(item)
        this.updateTableColumn(item, idx)
      }
    },

    /**
     * @description 更新表格标题数据
     */
    updateTableColumn (item, idx) {
      let t = this.tableTitle
      this.tableTitle = []
      t.forEach((item0, index) => {
        if (index === idx) {
          this.tableTitle.push(item)
        } else {
          this.tableTitle.push(item0)
        }
      })
    },

    /**
     * @description 处理表格排序
     */
    handleTableSort (item) {
      let key = item.key
      if (item.sortType === 'normal') {
        this.insideTableData = JSON.parse(JSON.stringify(this.rowData.paths))
      } else {
        this.insideTableData.sort((item1, item2) => {
          return (item1[key] - item2[key]) * (item.sortType === 'asc' ? 1 : -1)
        })
      }
    },
    /**
     * @description 获取远程数据
     */
    getData () {
      if (this.remoteMode && !this.hasGetData) {
        this.fetchData().then(res => {
          this.hasGetData = true
          this.insideTableData = this.fetchDataSuccess(res)
        }).catch(err => {
          console.error(err)
        })
      }
    }
  },

  mounted () {
    this.insideTableData = JSON.parse(JSON.stringify(this.rowData.paths))
  }
}
</script>

调用方式

import detailPoptip from 'poptip.vue'
<detailPoptip
  :rowData="{totalCount: 0, paths: []}"
  placement="bottom"
  // 启用远程模式
  :remoteMode="true"
  // 远程获取数据函数
  :fetchData="() => {
  	return Promise.all([request1, request2])
  }"
  // 远程获取数据成功回调函数
  :fetchDataSuccess="(res) => {
	console.log(res)
	return res
  }"
/>