BasicTable 重封装组件说明

封装说明

基础的使用方式与 API 与官方版(data-table) 本一致，在其基础上，封装了加载数据的方法。

你无需在你是用表格的页面进行分页逻辑处理，仅需向 BasicTable 组件传递绑定 :api="Promise" 对象即可

例子1

（基础使用）


<template>
    <BasicTable
      title="表格列表"
      :columns="columns"
      :api="loadDataTable"
      :row-key="row => row.id"
      @update:checked-row-keys="onCheckedRow"
    >
      <template #toolbar>
        <n-button type="primary">添加会员</n-button>
      </template>
    </BasicTable>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { BasicTable } from '@/components/Table'
import { getTableList } from '@/api/table/list'
const columns = [
    {
      title: 'id',
      key: 'id'
    },
    {
      title: '名称',
      key: 'name'
    },
    {
      title: '地址',
      key: 'address',
      auth: ['amdin'], // 同时根据权限控制是否显示
      ifShow: (row) => {
        return true; // 根据业务控制是否显示
      },
    },
    {
      title: '日期',
      key: 'date'
    },
]
export default defineComponent({
  components: { BasicTable },
  setup() {
      const loadDataTable = async (params) => {
        const data = await getTableList(params);
        return data
      }
    return {
      columns,
      loadDataTable
    }
  }
})
</script>

API

BasicTable 在 NaiveUi 的 data-table 上进行了一层封装，支持了一些预设，并且封装了一些行为。这里只列出与 data-table 不同的 api。

request：Promise 参考上面例子写法 ref：可绑定ref 调用组件内部方法（data-table本身的方法和参数）

Methods

reload：actionRef.value.reload()

其余方法，请打印查看

Slots

名称：tableTitle | 表格顶部左侧区域
名称：toolbar | 表格顶部右侧区域

更新时间

该文档最后更新于： 2021-07-12 PM 10:13

2.1 KiB Raw Blame History Unescape Escape

BasicTable 重封装组件说明

封装说明

API

Methods

Slots

更新时间

2.1 KiB

Raw Blame History