crm-app-vue3/components/custom-table/index.vue

<template>
  <scroll-view class="custom-table" scroll-y="true" @scrolltolower="handleScrollLower">
    <uni-table
      ref="tableRef"
      :border="border"
      :stripe="stripe"
      :emptyText="emptyText"
      :loading="loading"
      :type="type"
      @selection-change="handleSelectionChange"
    >
      <!-- 表头 -->
      <uni-tr>
        <!-- 多选列 -->
        <uni-th
          v-if="type === 'selection'"
          type="selection"
          width="60"
        ></uni-th>
        
        <!-- 序号列 -->
        <uni-th
          v-else-if="type === 'index'"
          type="index"
          :index="index"
          width="60"
        ></uni-th>
        
        <!-- 常规列 -->
        <uni-th
          v-for="(column, index) in columns"
          :key="'header-' + index"
          :width="column.width"
          :align="column.align"
          :sortable="column.sortable"
          :sort-method="column.sortMethod"
          :sort-by="column.sortBy"
          :resizable="column.resizable"
        >
          <view>
            <span v-if="column.isRequire" class="custom-table__require">*</span>
            <span>{{ column.label }}</span>
          </view>
        </uni-th>
      </uni-tr>
      
      <!-- 表格内容 -->
      <uni-tr
        v-for="(row, rowIndex) in tableData"
        :key="'row-' + rowIndex"
      >
        <!-- 多选列 -->
        <uni-td v-if="type === 'selection'" type="selection"></uni-td>
        
        <!-- 序号列 -->
        <uni-td v-else-if="type === 'index'" type="index"></uni-td>
        
        <!-- 常规列 -->
        <uni-td
          v-for="(column, colIndex) in columns"
          :key="'cell-' + rowIndex + '-' + colIndex"
          :align="column.align"
          :width="column.width"
        >
          <!-- 自定义单元格内容 -->
          <slot
            :name="'cell-' + column.prop"
            :row="row"
            :rowIndex="rowIndex"
            :column="column"
            :colIndex="colIndex"
          >
            <!-- 默认显示 -->
            <template v-if="column.formatter">
              {{ column.formatter(row, column, row[column.prop], rowIndex) }}
            </template>
            <template v-else>
              {{ row[column.prop] || '-' }}
            </template>
          </slot>
        </uni-td>
      </uni-tr>
    </uni-table>
    
    <!-- 加载更多 -->
    <view v-if="loading && !$attrs.loading" class="custom-table__load-more">
      <u-loading-icon size="18"></u-loading-icon>
      <span class="custom-table__load-more-text">加载中...</span>
    </view>
  </scroll-view>
</template>

<script>
export default {
  name: 'CustomTable',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => [],
      validator: (value) => {
        return value.every(item => item.prop && item.label);
      }
    },
    // 是否显示加载中
    loading: {
      type: Boolean,
      default: false
    },
    // 是否带有纵向边框
    border: {
      type: Boolean,
      default: true
    },
    // 是否显示斑马线
    stripe: {
      type: Boolean,
      default: false
    },
    // 表格类型 selection:多选 index:序号
    type: {
      type: String,
      default: '',
      validator: (value) => {
        return ['', 'selection', 'index'].includes(value);
      }
    },
    // 空数据显示的文本
    emptyText: {
      type: String,
      default: '暂无数据'
    },
    // 序号起始值
    index: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      scrollPosition: 0 // 滚动位置
    };
  },
  methods: {
    // 滚动事件
    handleScrollLower(e) {
        this.$emit('loadMore');
    },
    
    // 选择项变化
    handleSelectionChange(e) {
      this.$emit('selectionChange', e.detail);
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>