Table 表格

封装 useTable Hook，用于简化表格操作。

const [
    loading, // 加载状态
    list, // 列表数据
    total, // 总条数
    currentPage, // 当前页码
    perPage, // 每页数量
    search, // 搜索关键字
    loadList // 加载列表数据
  ] = useTable(() => {
    // 请求列表数据
  }, 
  { // 默认配置项
    immediate: true, // 是否立即执行
    page: 1, // 当前页码
    limit: 10 // 每页数量
  })

No Data

折叠显示名字时间地址插槽操作

• 1

tableLabel数据:

[ { "label": "折叠显示", "prop": "expand", "type": "expand", "width": "100", "slot": true, "show": false }, { "label": "名字", "prop": "name", "width": "" }, { "label": "时间", "prop": "date", "width": "" }, { "label": "地址", "prop": "address", "width": "", "showOverflowTooltip": true }, { "label": "插槽", "prop": "slot", "slot": true }, { "label": "操作", "prop": "handle", "fixed": "right", "slot": true } ]

selectData数据:

[]

<!--  -->
<template>
  <ql-card>
    <template #header>
      <!-- 按钮权限设置 v-btn[xxx]="$route" -->
      <el-button
        @click="search"
      >
        submit
      </el-button>
    </template>
    <!-- selectData双向数据绑定选中的值, 数据中必须有id  ref获取元素deleteSelect事件传入当前row 删除 -->
    <ql-table
      v-model:selectData="selectData"
      v-loading="loading"
      :label="tableLabel"
      :data="list"
      select
      @selection-change="handleSelectionChange"
    >
      <template #expand="scope">
        {{ scope.row }}
      </template>

      <!-- 在tab中自定义列使用slot  插槽名与prop保持一致  即#name  prop="name" -->
      <template #slot="scope">
        {{ scope.row.slot }}
      </template>

      <!-- 额外插槽可自定义规则 -->
      <template #handle="scope">
        <el-button
          bg
          type="primary"
          @click="handleUpdate(scope)"
        >
          编辑
        </el-button>
      </template>
    </ql-table>

    <ql-pagination
      v-model:current-page="page"
      v-model:page-size="limit"
      :total="total"
      :disabled="loading"
    />

    <div>tableLabel数据:</div>
    {{ tableLabel }}

    <div>selectData数据:</div>
    {{ selectData }}
  </ql-card>
</template>
<script setup lang="ts">
import { useTable } from 'qin-lantern'
// 模拟接口延时
import { delayed } from '@/utils'
const timedelay = delayed()

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    slot: '1',
    id: '1'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    slot: '2',
    id: '2'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    slot: '3',
    id: '3'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    slot: '4',
    id: '4'
  }
]

const tableLabel = reactive([
  {
    label: '折叠显示',
    prop: 'expand',
    type: 'expand', // 折叠显示的信息
    width: '100',
    slot: true,
    show: false
  },
  {
    label: '名字',
    prop: 'name',
    width: ''
  },
  {
    label: '时间',
    prop: 'date',
    width: ''
  },
  {
    label: '地址',
    prop: 'address',
    width: '',
    showOverflowTooltip: true
  },
  {
    label: '插槽',
    prop: 'slot',
    slot: true
  },
  {
    label: '操作',
    prop: 'handle',
    fixed: 'right', // 在移动端下默认变成false
    slot: true
  }
])

const selectData = ref([])

// 列表数据
const [loading, list, total, page, limit, search] = useTable(async () => {
  list.value = await timedelay(tableData) as any[] // 模拟调用接口
  total.value = Math.ceil(Math.random() * 100) // 返回总条数
})

const handleUpdate = (data: any) => {
  console.log(data)
}

const handleSelectionChange = (data: any) => {
  console.log(data)
}
</script>

<style scoped lang="scss"></style>

API

Attributes

属性名	说明	类型	默认
label	对标头项控制	TableColumn&{slot?: boolean, show?: boolean}	-
select	是否展示select	boolean	false
v-model:selectData	select数据	array	[]

Exposes

名称	说明	类型
deleteSelect	删除select选项	(row: any) => void

Attributes