@aochuang/common 1.0.0 → 1.0.126

package/components/grid/grid.vue

@@ -0,0 +1,1114 @@
+<template>
+  <div
+    class="ui-grid"
+    :class="[currentViewName ? ('ui-grid-view--' + currentViewName) : '']"
+    :style="gridStyle"
+  >
+    <div v-if="ready && showWrap" ref="wrap" class="ui-grid__wrap">
+      <div ref="header" class="ui-grid__header" v-show="exportFieldsShow">
+        <div class="ui-grid__filter">
+          <ui-filter ref="filter" v-model="filterPropsValue" :ready="filterReady" :imediate="imediate" :tableLoading="tableLoading" @change="handleFilterChange">
+            <template v-if="simpleFilterGroups && simpleFilterGroups.length">
+              <ui-filter-group
+                v-for="group in simpleFilterGroups"
+                :key="group.id"
+                v-bind="group.props"
+              >
+                <template v-if="group.children && group.children.length">
+                  <ui-filter-item
+                    v-for="item in group.children"
+                    :key="item.id"
+                    class="ui-grid__filter-item"
+                    v-bind="item.props"
+                  >
+                    <component :is="handleRenderFilterItem(item)" :data-key="item.data && item.data.key"></component>
+                  </ui-filter-item>
+                </template>
+              </ui-filter-group>
+            </template>
+            <template v-if="simpleFilterNotGroupItems && simpleFilterNotGroupItems.length">
+              <ui-filter-item
+                v-for="item in simpleFilterNotGroupItems"
+                :key="item.id"
+                class="ui-grid__filter-item"
+                v-bind="item.props"
+              >
+                <component :is="handleRenderFilterItem(item)" :data-key="item.data && item.data.key"></component>
+              </ui-filter-item>
+            </template>
+            <ui-filter-item v-if="filterOperateProps && filterOperateProps.items && filterOperateProps.items.length">
+              <ui-dropdown
+                label="按搜索条件"
+                :loading="tableLoading"
+              >
+                <ui-dropdown-item
+                  v-for="item in filterOperateProps.items"
+                  :key="item.id"
+                  :label="item.props.label"
+                  :value="item.props.value"
+                  :divided="item.props.divided"
+                  :icon="item.props.icon"
+                  :type="item.props.type"
+                  @click="handleFilterOperateItemClick(item)"
+                ></ui-dropdown-item>
+              </ui-dropdown>
+            </ui-filter-item>
+          </ui-filter>
+        </div>
+        <div class="ui-grid__global">
+          <div v-if="globalToolbarProps && globalToolbarProps.items && globalToolbarProps.items.length" class="ui-grid__global-toolbar">
+            <grid-global-toolbar
+              v-bind="globalToolbarProps"
+            ></grid-global-toolbar>
+          </div>
+          <div v-if="viewPanelData && viewPanelData.length" class="ui-grid__views">
+            <grid-view-select
+              :current="currentViewName"
+              :items="viewPanelData"
+              @change="handleViewPanelChange"
+            ></grid-view-select>
+          </div>
+          <div v-if="sortProps && sortProps.items && sortProps.items.length" class="ui-grid__sort">
+            <grid-sort
+              v-bind="sortProps"
+              @change="handleBealoneSortChange"
+            ></grid-sort>
+          </div>
+          <div v-if="moreToolbarProps && moreToolbarProps.items && moreToolbarProps.items.length" class="ui-grid__more-toolbar">
+            <grid-more-toolbar
+              v-bind="moreToolbarProps"
+            ></grid-more-toolbar>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="showBatchToolbar" ref="batch" class="ui-grid__batch">
+      <div class="ui-grid__batch-inner">
+        <grid-batch-toolbar
+          :data="tableData"
+          :selecteds="selecteds"
+          v-bind="batchToolbarProps"
+          @clear-selection="handleClearSelection"
+          @batch-success="handleBatchSuccess"
+        ></grid-batch-toolbar>
+      </div>
+    </div>
+    <template v-if="!enableMultipleView">
+      <div class="ui-grid__table" :style="tableStyle">
+        <grid-table
+          ref="table"
+          :row-height="rowHeight"
+          :key="tableKey"
+          :default-sort="defaultSort"
+          :show-index="showIndex"
+          :border="border"
+          :id-field="innerIdField"
+          :parent-field="parentField"
+          :multiple="innerMultiple"
+          :selectable="innerSelectable"
+          :data="tableData"
+          :height="tableHeight"
+          :row-class-name="rowClassName"
+          :max-height="tableMaxHeight"
+          :empty-text="emptyText"
+          :show-summary="showSummary"
+          :show-pagination="showPagination"
+          :page-index="tablePageIndex"
+          :page-size="tablePageSize"
+          :remote-sort="remoteSort"
+          :show-header="showHeader"
+          :row-check-method="rowCheckMethod"
+          :row-visible-method="rowVisibleMethod"
+          :check-strictly="checkStrictly"
+          :selectable-all="selectableAll"
+          @loaded="handleDataLoaded"
+          @selection-change="handleSelectionChange"
+          @select-change="handleSelectChange"
+          @sort-change="handleTableSortChange"
+          @column-resize-change="handleColumnResizeChange"
+          @hover-row-change="handleHoverRowChange"
+          @hook:mounted="handleTableMounted"
+        >
+          <slot></slot>
+          <vxe-column
+            v-if="rowToolbar && rowToolbar.length"
+            title="操作"
+            fixed="right"
+            field="__rowToolbar"
+            :width="rowToolbarWidth"
+          >
+            <template slot-scope="{ row, $rowIndex }">
+              <div style="display: flex;">
+                <grid-row-toolbar :row="row" :row-index="$rowIndex" :items="rowToolbar"></grid-row-toolbar>
+                <slot name="AIIcon" :row="row"></slot>
+              </div>
+            </template>
+          </vxe-column>
+          <slot name="append"></slot>
+        </grid-table>
+        <transition>
+          <div
+            v-if="tableLoading"
+            class="ui-grid__loading"
+          >
+            <ui-loading type="primary" size="medium"></ui-loading>
+          </div>
+        </transition>
+        <slot name="outer"></slot>
+      </div>
+    </template>
+    <template v-else>
+      <div class="ui-grid__content">
+        <slot></slot>
+        <transition>
+          <div
+            v-if="tableLoading"
+            class="ui-grid__loading"
+          >
+            <ui-loading type="primary" size="medium"></ui-loading>
+          </div>
+        </transition>
+      </div>
+    </template>
+    <div v-if="showPagination" ref="pagination" class="ui-grid__pagination">
+      <div class="ui-grid__pagination-inner">
+        <div class="ui-grid__pagination-check" v-if="!selectable && innerMultiple">
+          <span
+            class="ui-grid__pagination-check-input"
+            @click.stop
+          >
+            <vex-checkbox
+              :value="innerCheckAll"
+              :indeterminate="innerIndeterminate"
+              @input="handleCheckAllChange"
+            >全选 / 已选中{{ selecteds.length }}项</vex-checkbox>
+          </span>
+        </div>
+        <div class="ui-grid__pagination-control">
+          <ui-pagination
+            :page-index="tablePageIndex"
+            :page-size="tablePageSize"
+            :page-size-list="pageSizeList"
+            :total="tableTotal"
+            :title="title"
+            :allow-select-page-size="allowSelectPageSize"
+            :showPrevOrNext="showPrevOrNext"
+            @page-change="handlePageChange"
+          >
+          </ui-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Filter, FilterGroup, FilterItem } from '../filter'
+import GridTable from './grid-table'
+import GridColumn from './grid-column.vue'
+import GridRowToolbar from './grid-toolbar/grid-row-toolbar'
+import GridGlobalToolbar from './grid-toolbar/grid-global-toolbar'
+import GridBatchToolbar from './grid-toolbar/grid-batch-toolbar'
+import GridMoreToolbar from './grid-toolbar/grid-more-toolbar'
+import GridViewSelect from './grid-view-select'
+import GridTableView from './grid-table-view/grid-table-view'
+import GridCardView from './grid-card-view/grid-card-view'
+import { Dropdown, DropdownItem } from '../dropdown'
+import { GridSort } from './grid-sort'
+import Pagination from '../pagination'
+import Loading from '../loading'
+import { Checkbox as VexCheckbox, Column } from 'vxe-table'
+import { dispatch, getStorage, setStorage } from './util'
+import { addResizeListener, removeResizeListener } from '../../utils/resize-event'
+
+export default {
+  name: 'UiGrid',
+  components: {
+    VexCheckbox,
+    UiDropdown: Dropdown,
+    UiDropdownItem: DropdownItem,
+    UiLoading: Loading,
+    UiFilter: Filter,
+    UiFilterItem: FilterItem,
+    UiFilterGroup: FilterGroup,
+    UiPagination: Pagination,
+    VxeColumn: Column,
+    GridSort,
+    GridColumn,
+    GridViewSelect,
+    GridTableView,
+    GridCardView,
+    GridRowToolbar,
+    GridGlobalToolbar,
+    GridBatchToolbar,
+    GridMoreToolbar,
+    GridTable
+  },
+  inject: {
+    UiPage: {
+      default: null
+    },
+    UiDialog: {
+      default: null
+    }
+  },
+  provide() {
+    return {
+      UiGrid: this
+    }
+  },
+  props: {
+    id: {
+      type: String
+    },
+    height: {
+      type: String,
+      default: '100%'
+    },
+    tableKey: {
+      type: String
+    },
+    maxHeight: {
+      type: String
+    },
+    selectable: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    emptyText: {
+      type: String
+    },
+    data: {
+      type: Array
+    },
+    rowToolbar: {
+      type: Array
+    },
+    showHeader: {
+      type: Boolean,
+      default: true
+    },
+    idField: {
+      type: String
+    },
+    parentField: {
+      type: String
+    },
+    rowToolbarWidth: {
+      type: [String, Number],
+      default: '120px'
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    queryMethod: {
+      type: Function
+    },
+    showPagination: {
+      type: Boolean,
+      default: true
+    },
+    showIndex: {
+      type: Boolean
+    },
+    title: {
+      type: String
+    },
+    total: {
+      type: Number
+    },
+    border: {
+      type: Boolean,
+      default: false
+    },
+    showSummary: {
+      type: Boolean,
+      default: false
+    },
+    autoLoad: {
+      type: Boolean,
+      default: true
+    },
+    rowHeight: {
+      type: String
+    },
+    rowClassName: {
+      type: [String, Function]
+    },
+    remoteSort: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * {
+     *    field: null,
+     *    order: null
+     * }
+    */
+    defaultSort: {
+      type: [Object, Array]
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: false
+    },
+    selectableAll: {
+      type: Boolean,
+      default: true
+    },
+    rowCheckMethod: {
+      type: Function
+    },
+    rowVisibleMethod: {
+      type: Function
+    },
+    imediate: {
+      type: Boolean,
+      default: true
+    },
+    enableMultipleView: {
+      type: Boolean,
+      default: false
+    },
+    allowSelectPageSize: {
+      type: Boolean,
+      default: true
+    },
+    // 显示 上一页 下一页
+    showPrevOrNext: {
+      type: Boolean,
+      default: false
+    },
+    exportFieldsShow: {
+      type: Boolean,
+      default: true
+    },
+    pageSizeList: {
+      type: Array,
+      default: () => [20, 50, 100, 200]
+    }
+  },
+  data() {
+    return {
+      ready: false,
+      filterReady: false,
+      selecteds: [],
+      globalToolbarProps: {},
+      batchToolbarProps: {},
+      moreToolbarProps: {},
+      filterOperateProps: {
+        items: []
+      },
+      sortProps: {
+        items: [],
+        value: null
+      },
+      filterProps: {
+        items: [],
+        groups: [],
+        value: null
+      },
+      showColumnSetting: false,
+      tableColumns: [],
+      tablePageIndex: 1,
+      tablePageSize: 20,
+      tableLoading: this.loading,
+      tableTotal: 0,
+      tableData: [],
+      tableStyle: null,
+      tableMaxHeight: null,
+      innerIdField: this.idField,
+      innerMultiple: this.multiple,
+      hoverRow: null,
+      viewPanelData: [],
+      currentViewName: 'table',
+      $control: null
+    }
+  },
+  computed: {
+    showWrap() {
+      if (this.globalToolbarProps && this.globalToolbarProps.items && this.globalToolbarProps.items.length) {
+        return true
+      }
+      if (this.moreToolbarProps && this.moreToolbarProps.items && this.moreToolbarProps.items.length) {
+        return true
+      }
+      if (this.simpleFilterItems && this.simpleFilterItems.length) {
+        return true
+      }
+      return false
+    },
+    gridStyle() {
+      const style = {}
+      if (this.height && this.height !== 'auto') {
+        style.height = this.height
+      }
+      if (this.height && this.maxHeight) {
+        style['max-height'] = this.maxHeight
+      }
+      return style
+    },
+    simpleFilterGroups() {
+      if (!this.filterProps || !this.filterProps.groups) {
+        return
+      }
+      return this.filterProps.groups.map(v => {
+        const vv = Object.assign({}, v)
+        vv.children = this.simpleFilterItems.filter(item => item.groupId === v.id)
+        return vv
+      })
+    },
+    simpleFilterItems() {
+      if (!this.filterProps || !this.filterProps.items) {
+        return
+      }
+      return (this.filterProps.items || []).filter(v => v.type !== 'advance')
+    },
+    simpleFilterNotGroupItems() {
+      if (!this.filterProps || !this.filterProps.items) {
+        return
+      }
+      return (this.filterProps.items || []).filter(v => !v.groupId)
+    },
+    innerShowSort() {
+      return !!(this.sortProps && this.sortProps.items && this.sortProps.items.length)
+    },
+    exportColumns() {
+      return this.tableColumns.filter(v => v.props.exportable)
+    },
+    tableHeight () {
+      if (this.maxHeight) {
+        return ''
+      }
+      if (!this.height || this.height === 'auto') {
+        return 'auto'
+      }
+      return '100%'
+    },
+    innerSelectable () {
+      if (this.multiple === true) {
+        return true
+      }
+      return !!this.selectable
+    },
+    innerIndeterminate() {
+      return !!(this.selecteds.length && this.selecteds.length < this.tableData.length)
+    },
+    innerCheckAll () {
+      return this.selecteds.length && this.selecteds.length >= this.tableData.length
+    },
+    tableViewContent () {
+      const tableView = this.viewPanelData.find(v => v.name === 'table')
+      if (!tableView) {
+        return
+      }
+      const rs = tableView.render()
+      console.log(rs)
+      return {
+        functional: true,
+        render (h) {
+          return h('div', rs)
+        }
+      }
+    },
+    showBatchToolbar () {
+      return this.batchToolbarProps.items && this.batchToolbarProps.items.length && !!this.selecteds.length
+    },
+    cacheCurrentViewNameKey () {
+      if (!this.id) {
+        return
+      }
+      return 'bi-grid-current-view-name-' + this.id
+    },
+    filterPropsValue: {
+      get () {
+        return this.filterProps.value
+      },
+      set (val) {
+        this.filterProps.value = val
+      }
+    }
+  },
+  watch: {
+    data(data) {
+      // this.tableData = data
+      if (this.showPagination) {
+        this._setData({
+          total: data.length,
+          results: data
+        })
+      } else {
+        this._setData(data)
+      }
+    },
+    loading(val) {
+      this.tableLoading = val
+    },
+    idField (val) {
+      this.innerIdField = val
+    },
+    multiple (val) {
+      this.setMultiple(val)
+    }
+  },
+  created() {
+    this.cacheColumns = []
+    if (this.$route && this.$route.query && this.$route.query.pageindex) {
+      this.tablePageIndex = Number(this.$route.query.pageindex)
+    }
+    if (this.data && this.data.length) {
+      this._setData(this.data)
+    }
+    if (this.cacheCurrentViewNameKey) {
+      const currentViewName = getStorage(this.cacheCurrentViewNameKey)
+      if (currentViewName) {
+        this.currentViewName = currentViewName
+      }
+    }
+    dispatch(this, 'UiGridCreated', {
+      setIdField: (idField) => {
+        this.setIdField(idField)
+      },
+      setMultiple: (multiple) => {
+        this.setMultiple(multiple)
+      }
+    })
+  },
+  mounted() {
+    if (this.$refs.table) {
+      this.$control = this.$refs.table
+    }
+    this.ready = true
+    this.doLayout()
+    // 稍微晚一点执行，页面可能还需要加载一些数据
+    this.loadTimer = setTimeout(() => {
+      if (this.autoLoad) {
+        this.loadData()
+      }
+      this.filterReady = true
+    })
+    addResizeListener(this.$el.parentNode, () => {
+      this.doLayout()
+    })
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer)
+    clearTimeout(this.loadTimer)
+    clearTimeout(this._timer)
+    removeResizeListener(this.$el.parentNode)
+  },
+  methods: {
+    handleViewPanelChange ({ item }) {
+      this.currentViewName = item.name
+      if (this.selecteds.length) {
+        this.selecteds = []
+        this.$emit('selection-change', {
+          selection: this.selecteds,
+          data: this.tableData
+        })
+      }
+      if (this.cacheCurrentViewNameKey) {
+        setStorage(this.cacheCurrentViewNameKey, item.name)
+      }
+    },
+    handleCheckAllChange(value) {
+      if (value) {
+        this.selecteds = this.tableData
+        this.setSelectionRows(this.tableData, true)
+      } else {
+        this.selecteds = []
+        this.setSelectionRows(this.tableData, false)
+      }
+      this.$emit('selection-change', {
+        selection: this.selecteds,
+        data: this.tableData
+      })
+    },
+    setIdField (idField) {
+      this.innerIdField = idField
+    },
+    setMultiple (multiple) {
+      this.innerMultiple = multiple
+    },
+    handleFilterOperateItemClick (item) {
+      item && item.click && item.click({
+        data: this.tableData,
+        total: this.showPagination ? this.tableTotal : this.tableData.length
+      })
+    },
+    handleHoverRowChange (evt) {
+      this.hoverRow = evt.row
+    },
+    handleColumnResizeChange (evt) {
+      this.$emit('column-resize-change', evt)
+    },
+    handleDataLoaded () {
+      this.$emit('loaded', {
+        data: this.tableData
+      })
+    },
+    handleBealoneSortChange (evt) {
+      this.$set(this.sortProps, 'value', evt.value)
+      if (!this.remoteSort) {
+        return
+      }
+      this.loadData()
+    },
+    handleTableSortChange() {
+      this.isChangeSort = true
+      if (!this.remoteSort) {
+        return
+      }
+      this.loadData()
+    },
+    handleRenderFilterItem(item) {
+      return {
+        functional: true,
+        render: (h, c) => {
+          return item.render(h, c)
+        }
+      }
+    },
+    handleClearSelection() {
+      this.selecteds = []
+      this.$control && this.$control.clearSelection()
+    },
+    handleBatchSuccess() {
+      this.loadData()
+    },
+    handleSelectionChange({ selection }) {
+      this.selecteds = selection || []
+      this.$emit('selection-change', {
+        selection,
+        data: this.tableData
+      })
+    },
+    handleSelectChange ({ row }) {
+      this.$emit('current-change', {
+        row,
+        data: this.tableData
+      })
+    },
+    handlePageChange(e) {
+      this.tablePageSize = e.pageSize
+      this.tablePageIndex = e.pageIndex
+      this.loadData()
+    },
+    handleFilterChange() {
+      if (!this.autoLoad) {
+        return
+      }
+      this.reload()
+    },
+    handleRefreshClick() {
+      if (this.tableLoading) {
+        return
+      }
+      this.loadData()
+    },
+    getFilters() {
+      if (this.$refs.filter) {
+        return this.$refs.filter.getFilters()
+      }
+      return {}
+    },
+    getSort() {
+      let sort = null
+      if (this.$control) {
+        sort = this.$control.getSortColumns().reduce((rs, v) => {
+          rs[v.field] = v.order
+          return rs
+        }, {})
+      }
+      if (this.sortProps && this.sortProps.value) {
+        if (!sort) {
+          sort = {}
+        }
+        sort[this.sortProps.value.prop] = this.sortProps.value.order
+      }
+      // 排序改变过的，就不用默认的了
+      if (!this.isChangeSort) {
+        if ((!sort || !Object.keys(sort).length) && this.defaultSort) {
+          let defaultSort = this.defaultSort
+          if (defaultSort && !Array.isArray(defaultSort)) {
+            defaultSort = [defaultSort]
+          }
+          sort = defaultSort.reduce((rs, v) => {
+            rs[v.field] = v.order
+            return rs
+          }, {})
+        }
+      }
+      return sort
+    },
+    reload() {
+      this.tablePageIndex = 1
+      return this.loadData()
+    },
+    loadData() {
+      return new Promise((resolve, reject) => {
+        if (typeof this.queryMethod === 'function') {
+          let ps = {}
+          const fs = this.getFilters()
+          if (this.showPagination) {
+            ps = {
+              pageIndex: this.tablePageIndex - 1,
+              pageSize: this.tablePageSize
+            }
+          }
+          const options = {
+            filter: fs,
+            page: ps
+          }
+          const sort = this.getSort()
+          if (sort) {
+            const sortKey = Object.keys(sort)[0]
+            const orderMap = {
+              'asc': 2,
+              'desc': 1
+            }
+            options.order = {
+              sortField: sortKey,
+              order: orderMap[sort[sortKey]]
+            }
+          }
+          const rs = this.queryMethod(options)
+          if (rs && rs.then) {
+            this.tableLoading = true
+            rs.then((data) => {
+              this.tableLoading = false
+              this._setData(data)
+              resolve(data)
+            }, (err) => {
+              this.tableLoading = false
+              reject(err)
+            })
+          } else {
+            this._setData(rs)
+          }
+        } else {
+          resolve()
+        }
+      })
+    },
+    _setData(result) {
+      if (this.showPagination) {
+        let total = 0
+        let data = []
+        if (result) {
+          total = parseInt(result.total) || 0
+          data = result.results || []
+        }
+        this.tableData = data
+        this.tableTotal = total
+      } else {
+        this.tableData = result || []
+      }
+      this.selecteds = []
+      this.$control && this.$control.clearSelection()
+      if (this.multiple) {
+        this.$emit('selection-change', {
+          selection: [],
+          data: this.tableData
+        })
+      }
+      this.$emit('filled', {
+        data: this.tableData
+      })
+    },
+    toggleRowSelection(row, isSelected) {
+      this.$control && this.$control.toggleRowSelection(row, isSelected)
+    },
+    setCurrentRow(row) {
+      this.$control && this.$control.setCurrentRow(row)
+    },
+    setSelectionRows (rows, isSelected = true) {
+      this.$control && this.$control.setCheckboxRow(rows, isSelected)
+    },
+    setSelectRow (row) {
+      this.$control && this.$control.setRadioRow(row)
+    },
+    doLayout () {
+      let tableMaxHeight = null
+      if (this.maxHeight) {
+        const parentHeight = this.$el.parentNode.clientHeight || 0
+        const wrapHeight = this.$refs.wrap ? this.$refs.wrap.offsetHeight : 0
+        const paginationHeight = this.$refs.pagination ? this.$refs.pagination.offsetHeight : 0
+        if (this.maxHeight.indexOf('%')) {
+          tableMaxHeight = parentHeight - wrapHeight - paginationHeight * (parseInt(this.maxHeight) / 100) + ''
+        } else {
+          tableMaxHeight = this.maxHeight - wrapHeight - paginationHeight + ''
+        }
+      }
+      this.tableMaxHeight = tableMaxHeight
+    },
+    addViewPanel (data) {
+      if (!data || !data.name) {
+        throw new Error('缺少必须参数')
+      }
+      if (this.viewPanelData.some(v => v.name === data.name)) {
+        return
+      }
+      this.viewPanelData.push(data)
+    },
+    removeViewPanel (name) {
+      let index = -1
+      this.viewPanelData.some((v, i) => {
+        if (v.name === name) {
+          index = i
+          return true
+        }
+      })
+      if (index < 0) {
+        return
+      }
+      this.viewPanelData.splice(index, 1)
+    },
+    handleGridViewSelectionChange (evt) {
+      this.selecteds = evt.selection || []
+      this.$emit('selection-change', {
+        selection: evt.selection,
+        data: this.tableData
+      })
+    },
+    handleCardViewSelectionChange (evt) {
+      this.selecteds = evt.selection || []
+      this.$emit('selection-change', {
+        selection: evt.selection,
+        data: this.tableData
+      })
+    },
+    handleTableMounted () {
+      this.$control = this.$refs.table
+    }
+  }
+}
+</script>
+<style lang="less">
+body {
+  .is--checked.vxe-checkbox,
+  .is--checked.vxe-checkbox .vxe-checkbox--icon,
+  .is--checked.vxe-custom--checkbox-option,
+  .is--checked.vxe-custom--checkbox-option .vxe-checkbox--icon,
+  .is--checked.vxe-export--panel-column-option,
+  .is--checked.vxe-export--panel-column-option .vxe-checkbox--icon,
+  .is--checked.vxe-table--filter-option,
+  .is--checked.vxe-table--filter-option .vxe-checkbox--icon,
+  .is--indeterminate.vxe-checkbox,
+  .is--indeterminate.vxe-checkbox .vxe-checkbox--icon,
+  .is--indeterminate.vxe-custom--checkbox-option,
+  .is--indeterminate.vxe-custom--checkbox-option .vxe-checkbox--icon,
+  .is--indeterminate.vxe-export--panel-column-option,
+  .is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon,
+  .is--indeterminate.vxe-table--filter-option,
+  .is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon,
+  .vxe-table--render-default .is--checked.vxe-cell--checkbox,
+  .vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,
+  .vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,
+  .vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon {
+    color: #0052cc;
+  }
+  .vxe-table--render-default .vxe-cell--checkbox.is--disabled .vxe-checkbox--icon{
+    color: #dcdfe6;
+  }
+}
+.ui-grid{
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  [class*=vxe-], [class*=vxe-] :after, [class*=vxe-] :before, [class*=vxe-]:after, [class*=vxe-]:before{
+    box-sizing: border-box;
+  }
+  .ui-grid-pagination{
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+.ui-grid__wrap {
+  padding-bottom: 12px;
+  position: relative;
+}
+.ui-grid__header{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 28px;
+  position: relative;
+  z-index: 3;
+}
+.ui-grid__sort{
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.ui-grid__filter{
+  // display: flex;
+  // flex-direction: row;
+  // align-items: center;
+  flex: 1;
+}
+.ui-grid__filter-item{
+  vertical-align: top;
+  margin-right: 12px;
+}
+.ui-grid__pagination-inner{
+  padding: 9px 0 0;
+  background-color: #fff;
+  position: relative;
+  z-index: 3;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.ui-grid__pagination-control{
+  flex: 1;
+  min-width: 0;
+}
+.ui-grid__global{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+.ui-grid-global-toolbar{
+  .ui-toolbar-item{
+    line-height: 1;
+  }
+}
+.ui-grid__more-toolbar,
+.ui-grid__global-toolbar{
+  display: inline-block;
+  margin-left: 12px;
+}
+.ui-grid__batch{
+  margin-bottom: 12px;
+}
+.ui-grid__loading{
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  opacity: .8;
+  line-height: 1em;
+  &.v-enter{
+    opacity: 0;
+  }
+  &.v-enter-active{
+    transition: all .3s;
+  }
+  &.v-enter-active{
+    opacity: 0.8;
+  }
+  &.v-leave{
+    opacity: 0.8;
+  }
+  &.v-leave-active{
+    transition: all .3s;
+  }
+  &.v-leave-active{
+    opacity: 0;
+  }
+}
+@keyframes grid-refreshing{
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(1turn);
+  }
+}
+.ui-grid__refresh{
+  margin-left: 12px;
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all .25s;
+  text-align: center;
+  &:hover {
+    background-color: #f8f8f9;
+  }
+  &:after {
+    content: '';
+    width: 18px;
+    height: 18px;
+    display: inline-block;
+    vertical-align: top;
+    margin-top: 5px;
+    background: url('./icons/refresh.svg') no-repeat 50% 50%;
+    background-size: 16px;
+  }
+  &.is-loading {
+    &:after {
+      animation: grid-refreshing 1s linear infinite;
+    }
+  }
+}
+.ui-grid__table{
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+.ui-grid__content{
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.ui-grid__pagination-check{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 20px;
+  position: relative;
+  margin-right: 2px;
+  height: 18px;
+  line-height: 18px;
+  &:after {
+    content: '';
+    position: absolute;
+    width: 1px;
+    height: 18px;
+    background-color: #eee;
+    top: 50%;
+    margin-top: -9px;
+    right: 0;
+  }
+}
+.ui-grid__pagination-check-input{
+  height: 18px;
+  line-height: 18px;
+  display: inline-block;
+  .vxe-checkbox{
+    vertical-align: top;
+  }
+  .vxe-checkbox:not(.is--disabled)>input:focus+.vxe-checkbox--icon{
+    box-shadow: none;
+  }
+}
+.ui-grid__sort{
+  margin-left: 12px;
+}
+.ui-grid-view--card {
+  .ui-grid__pagination{
+    border-top: 1px solid #eee;
+    margin-top: 12px;
+    .ui-grid__pagination-check{
+      padding-left: 0;
+    }
+  }
+}
+</style>