【Vxe-Table】基础使用 - 指北

一、引入Vxe-Table

// 安装依赖
pnpm install vxe-table@4.16.19

// main.ts 引入vxe表格库
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// 创建实例 
const app = createApp(App)
app.use(VxeUITable)
app.mount('#app')

二、表格配置

<vxe-table
  ref="orderTableRef"
  :data="list" // 列表数据源
  :cell-config="{ height: 48 }" // 设置单行行高
  :column-config="columnConfig" // 表格基础配置
  @checkbox-all="selectChangeEvent" // 绑定行全选事件
  @checkbox-change="selectChangeEvent" // 绑定行勾选事件
  :checkbox-config="{ highlight: true }" // 选中高亮
  :virtual-y-config="{ enabled: true, gt: 0 }" // 配置表格虚拟列表纵向滚动 gt: 从第几行开始
  :virtual-x-config="{ enabled: true, gt: 0 }" // 配置表格虚拟列表横向滚动 gt: 从第几列开始
  :height="500" // 表格固定高度
  @sort-change="sortChangeEvent" // 自定义列表排序事件
  size="mini" // 表格样式 large middle small mini
  :border="true" // 表格样式 边框
  @column-dragend="dragEnd" // 拖拽事件 拖拽更换顺序后触发
  show-footer // 显示行尾合计列表
  :footer-data="tableFooterData" // 自定义行尾合计数据
>
  // 多选checkbox列
  <vxe-column field="checkbox" type="checkbox" fixed="left" align="center" width="80" />
  // 动态加载 表格列
  <vxe-column
    v-for="column in tableColumns"
    :key="column.key"
    align="center"
    :title="column.label"
    :width="column.width"
    :fixed="column.isFixed ? 'left' : ''"
    :sortable="column.sortAble"
    :field="column.key"
  >
    <template #default="scope">
      <component :is="column.component(scope)" />
    </template>
  </vxe-column>
</vxe-table>

<script lang="tsx" setup>

// vxe表格基础配置
const columnConfig = {
  resizable: true,
  height: 28,
  align: 'center',
  drag: true
}

// 多选事件 点击勾选单行 或者 点击全选后触发
const multipleSelection = ref<OrderVO[]>([])
const selectChangeEvent = ({ checked }) => {
  const records = orderTableRef.value.getCheckboxRecords()
  multipleSelection.value = [...records]
  // 勾选后 重新计算合计
  getSummaries()
}

// 排序
const sortChangeEvent = async ({ field, order }) => {
  // field: 排序字段  order: ase desc null 排序方式
  queryParams.sortingFields = [{ field, order }]
  getList()
}

// 拖拽完成后 组装数据 存到缓存里
const dragEnd = () => {
  // 获取拖拽后的列表字段顺序
  const tableColumn = orderTableRef.value.getFullColumns()
  // 过滤有效字段 排除如 多选列checkbox 、操作栏等 
  const columns = tableColumn.filter((item) => item.field)
  const columnsAfterSort = columns.map((item, index) => {
    const field = item.field
    const column = tableColumns.value.find((tableColumn) => tableColumn.key === field)
    return {
      ...column,
      columnIndex: index
    }
  })
  // 如有需要 对拖拽后的数据做存储
  localStorage.setItem('OrderSort', JSON.stringify(columnsAfterSort))
}

// 计算表尾数据统计
const getSummaries = () => {
    // ....统计逻辑代码
    return [{ checkbox: '合计', 字段A: 100, 字段B: 200 , ... }]
}

// 动态加载表格字段
const renderColumns = () => {
  return [
    {
      key: 'field1',
      label: '表格列11',
      width: 180,
      show: true,
      columnIndex: 1,
      isFixed: true,
      component: (scope) => {
        return (
          <div class="flex items-center justify-center">
            <el-link underline={false} type="primary" onClick={() => openDetail(scope.row.id)}>
              {scope.row.field1}
            </el-link>
            <Icon
              icon="ep:chat-line-round"
              class="ml-4px cursor-pointer"
            />
          </div>
        )
      }
    },
    {
      key: 'field2',
      label: '表格列22',
      width: 180,
      show: true,
      columnIndex: 3,
      component: (scope) => {
        return <div>{scope.row.customerName}</div>
      }
    },
    ....
  ]
}
</script>