auth-web/src/components/vxe-table-basic/index.vue

<!--
二次封装vxe-table组件
@Author: linqian
@Date: 2021-10-18 14:22
-->
<template>
  <div>
    <vxe-table
      ref="vxeGrid"
      :data="tableData"
      :border="true"
      :loading="false"
      rowId="id"
      v-bind="gridOptions"
      highlight-hover-row
      :seq-config="{ seqMethod }"
    >
      <vxe-table-column type="checkbox" width="60" align="center" v-if="selection">
        <template #header="row">
          <span class="custom-checkbox">
            <el-checkbox
              :indeterminate="row.indeterminate"
              v-model="row.checked"
              @change="handleToggleAllCheck"
            ></el-checkbox>
          </span>
        </template>
        <template #checkbox="scoped">
          <span class="custom-checkbox">
            <el-checkbox
              :indeterminate="scoped.indeterminate"
              v-model="scoped.checked"
              @change="handleToggleCheck(scoped.row)"
            ></el-checkbox>
          </span>
        </template>
      </vxe-table-column>
      <vxe-table-column type="seq" width="60" align="center" title="序号"></vxe-table-column>
      <vxe-table-column
        v-for="item in tableColumn"
        :key="item.id"
        :align="item.align ? item.align : 'center'"
        v-bind="item"
      >
        <template #default="{ row }">
          <template v-if="item.custom">
            <slot :name="item.field" :row="row"></slot>
          </template>
          <template v-else>{{ row[item.field] }}</template>
        </template>
      </vxe-table-column>
      <vxe-table-column v-if="tableOptList.length > 0" align="center" title="操作" field="operate" width="100px">
        <template #default="{ row }">
          <div class="u-table__operation">
            <el-tooltip
              v-for="(item, index) in tableOptList"
              :key="index"
              :content="item"
              effect="dark"
              placement="top-end"
            >
              <i :class="item | optIcon" @click="handleEvent(item, row)"></i>
            </el-tooltip>
          </div>
        </template>
      </vxe-table-column>
    </vxe-table>
    <!-- 分页器 -->
    <div class="pagination-section" v-show="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="pageSize"
        :current-page="currentPage"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 表格数据
    tableData: Array,
    // 是否有复选框
    selection: {
      type: Boolean,
      default: true
    },
    tableColumn: Array,
    // 是否分页
    pagination: {
      type: Boolean,
      default: true
    },
    paginationConfig: {
      type: Object,
      default: () => {
        return {
          pageSize: 10,
          currentPage: 1,
          total: 0
        };
      }
    },
    gridOptions: {
      type: Object,
      default: () => {}
    },
    tableOptList: {
      type: Array,
      default: () => []
    }
  },
  components: {},
  data() {
    return {};
  },
  computed: {
    pageSize() {
      return this.paginationConfig.pageSize;
    },
    currentPage() {
      return this.paginationConfig.currentPage;
    },
    total() {
      return this.paginationConfig.total;
    }
  },
  methods: {
    // 条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.submitPaginationChange(1, val);
    },
    // 页码改变
    handleCurrentChange(val) {
      this.submitPaginationChange(val, this.paginationConfig.pageSize);
    },
    submitPaginationChange(currentPage, pageSize) {
      this.$emit('paginationChange', {
        pageSize,
        currentPage
      });
    },
    // 发送操作事件类型
    handleEvent(type, row) {
      this.$emit('submitTableOpt', type, row);
    },
    // 改变单个复选框
    handleToggleCheck(row) {
      this.$refs.vxeGrid.toggleCheckboxRow(row);
    },
    // 改变全选复选框
    handleToggleAllCheck() {
      this.$refs.vxeGrid.toggleAllCheckboxRow();
    },
    // 自定义序号
    // 自定义原因： 树形表格翻页序号还是从1开始
    seqMethod({ level, seq, $seq }) {
      let index = '';
      if (level > 0) {
        index = `${$seq}.${seq}`;
        if (this.pagination) {
          const dotIndex = index.indexOf('.');
          if (dotIndex > -1) {
            let integerNum = (this.currentPage - 1) * this.pageSize + Number(index.substring(0, dotIndex));
            index = integerNum + '' + index.substr(dotIndex);
          }
        }
      } else {
        index = seq;
        if (this.pagination) {
          index = (this.currentPage - 1) * this.pageSize + seq;
        }
      }
      return index;
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang='scss' scoped>
.pagination-section {
  text-align: right;
  margin-top: 10px;
}
/deep/ .vxe-table .vxe-table--header-wrapper {
  color: rgba(0, 0, 0, 0.65);
  font-family: 'Microsoft YaHei', '微软雅黑', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
/deep/ .vxe-table--render-default {
  color: rgba(0, 0, 0, 0.85);
}
/deep/ .vxe-table--render-default .vxe-cell {
  white-space: normal;
}
/deep/ .vxe-header--column {
  font-weight: 400;
}
/deep/ .vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon:before {
  border: 1px solid rgba(0, 0, 0, 0.15);
}
/deep/ .vxe-body--row:hover {
  background-color: rgba(24, 144, 255, 0.08);
}

/deep/ .vxe-table--render-default .vxe-table--empty-block {
  min-height: 60px;
  color: rgba(0, 0, 0, 0.65);
}
</style>