Cxz UI

Appearance

On this page

ProTable 高级表格 ​

简介 ​

集成Form、Table、Pagination，配置化，方便快速搭建列表页。没有添加过多样式，可以根据具体业务进行覆盖

基础用法 ​

通过useProTable配置，getList 为获取数据方法，form 传CxzForm的属性，form 中添加defaultValue设置默认值，table 传CxzTable的属性

姓名
产品名称
暂无数据
共 0 条
  • 1
前往
页

<template>
  <CxzProTable :init="init" />
</template>

<script setup lang="ts">
import { markRaw } from 'vue'
import { CxzProTable, useProTable } from 'cxz-ui'
import { ElInput } from 'element-plus'
import { getMock } from './mock'

const { init } = useProTable({
  getList: async (params) => {
    const { page, pageSize, ...rest } = params
    const res = await getMock(['date', 'name', 'address'], page, pageSize)
    return {
      data: res.data.data,
      page: res.data.page,
      pageCount: res.data.pageCount,
      itemCount: res.data.itemCount
    }
  },
  form: {
    schema: [
      {
        prop: 'key_1',
        label: '姓名',
        component: markRaw(ElInput),
        componentAttrs: {
          placeholder: '请输入姓名'
        }
      },
      {
        prop: 'key_2',
        label: '产品名称',
        component: markRaw(ElInput),
        componentAttrs: {
          placeholder: '请输入产品名称'
        }
      },
      {
        prop: 'key_3',
        label: '机构名称',
        component: markRaw(ElInput),
        componentAttrs: {
          placeholder: '请输入机构名称'
        }
      },
      {
        prop: 'key_4',
        label: '年龄',
        component: markRaw(ElInput),
        componentAttrs: {
          placeholder: '请输入年龄'
        }
      }
    ]
  },
  table: {
    columns: [
      {
        prop: 'date',
        label: '日期'
      },
      {
        prop: 'name',
        label: '姓名'
      },
      {
        prop: 'address',
        label: '地址'
      }
    ]
  }
})
</script>

表单折叠个数 ​

通过 show-count 控制表单折叠显示个数

姓名
产品名称
机构名称
年龄
暂无数据
共 0 条
  • 1
前往
页

<template>
  <CxzProTable :init="init" :show-count="5" />
</template>

<script setup lang="ts">
import { markRaw } from 'vue'
import { CxzProTable, useProTable } from 'cxz-ui'
import { ElInput } from 'element-plus'
import { getMock } from './mock'

const { init } = useProTable({
  getList: async (params) => {
    const { page, pageSize, ...rest } = params
    const res = await getMock(['date', 'name', 'address'], page, pageSize)
    return {
      data: res.data.data,
      page: res.data.page,
      pageCount: res.data.pageCount,
      itemCount: res.data.itemCount
    }
  },
  form: {
    schema: [
      {
        prop: 'key_1',
        label: '姓名',
        component: markRaw(ElInput),
        componentAttrs: {
          placeholder: '请输入姓名'
        }
      },
      {
        prop: 'key_2',
        label: '产品名称',
        component: markRaw(ElInput),
        componentAttrs: {
          placeholder: '请输入产品名称'
        }
      },
      {
        prop: 'key_3',
        label: '机构名称',
        component: markRaw(ElInput),
        componentAttrs: {
          placeholder: '请输入机构名称'
        }
      },
      {
        prop: 'key_4',
        label: '年龄',
        component: markRaw(ElInput),
        componentAttrs: {
          placeholder: '请输入年龄'
        }
      }
    ]
  },
  table: {
    columns: [
      {
        prop: 'date',
        label: '日期'
      },
      {
        prop: 'name',
        label: '姓名'
      },
      {
        prop: 'address',
        label: '地址'
      }
    ]
  }
})
</script>

仅表格 ​

form 不传 schema 就不会显示搜索表单

暂无数据
共 0 条
  • 1
前往
页

<template>
  <CxzProTable ref="tableRef" :init="init" />

  <el-button @click="toggleSelection()">Clear selection</el-button>
</template>

<script setup lang="ts">
import { CxzProTable, useProTable } from 'cxz-ui'
import { getMock } from './mock'
import { ref } from 'vue'

const { init } = useProTable({
  getList: async (params) => {
    const { page, pageSize, ...rest } = params
    const res = await getMock(['date', 'name', 'address'], page, pageSize)
    return {
      data: res.data.data,
      page: res.data.page,
      pageCount: res.data.pageCount,
      itemCount: res.data.itemCount
    }
  },
  table: {
    columns: [
      {
        type: 'selection',
        width: 55
      },
      {
        prop: 'date',
        label: '日期'
      },
      {
        prop: 'name',
        label: '姓名'
      },
      {
        prop: 'address',
        label: '地址'
      }
    ]
  }
})

const tableRef = ref<InstanceType<typeof CxzProTable>>()
const toggleSelection = () => {
  tableRef.value?.tableRef?.clearSelection()
}
</script>

插槽 ​

姓名
产品名称
暂无数据
共 0 条
  • 1
前往
页

<template>
  <CxzProTable :init="init">
    <template #key_1>表单插槽</template>

    <template #date>表格插槽</template>

    <template #$operation>
      <el-button type="primary">新增</el-button>
    </template>

    <template #operation>
      <el-space>
        <el-button type="primary" link>查看</el-button>
        <el-button type="primary" link>编辑</el-button>
        <el-button type="danger" link>删除</el-button>
      </el-space>
    </template>
  </CxzProTable>
</template>

<script setup lang="ts">
import { markRaw } from 'vue'
import { CxzProTable, useProTable } from 'cxz-ui'
import { ElInput } from 'element-plus'
import { getMock } from './mock'

const { init } = useProTable({
  getList: async (params) => {
    const { page, pageSize, ...rest } = params
    const res = await getMock(['date', 'name', 'address'], page, pageSize)
    return {
      data: res.data.data,
      page: res.data.page,
      pageCount: res.data.pageCount,
      itemCount: res.data.itemCount
    }
  },
  form: {
    schema: [
      {
        prop: 'key_1',
        label: '姓名',
        component: markRaw(ElInput),
        componentAttrs: {
          placeholder: '请输入姓名'
        },
        slot: 'key_1'
      },
      {
        prop: 'key_2',
        label: '产品名称',
        component: markRaw(ElInput),
        componentAttrs: {
          placeholder: '请输入产品名称'
        }
      },
      {
        prop: 'key_3',
        label: '机构名称',
        component: markRaw(ElInput),
        componentAttrs: {
          placeholder: '请输入机构名称'
        }
      },
      {
        prop: 'key_4',
        label: '年龄',
        component: markRaw(ElInput),
        componentAttrs: {
          placeholder: '请输入年龄'
        }
      }
    ]
  },
  table: {
    columns: [
      {
        prop: 'date',
        label: '日期',
        slot: 'date'
      },
      {
        prop: 'name',
        label: '姓名'
      },
      {
        prop: 'address',
        label: '地址'
      },
      {
        prop: 'operation',
        label: '操作',
        slot: 'operation',
        width: 150
      }
    ]
  }
})
</script>

ProTable 属性 ​

属性名说明类型默认值
init初始化方法ProTableInitFunctionParams{}
showCount表单折叠显示个数number2
paginationElPagination 属性--

ProTable 事件 ​

同原 ElTable 事件

ProTable Expose ​

名称说明
tableRef通过 tableRef 可以调用 ElTable 方法

ProTable 插槽 ​

插槽名说明
$append原 el-table append 插槽，加$防和其他插槽名称冲突
$empty原 el-table empty 插槽，加$防和其他插槽名称冲突
$operation表格头部操作列，加$防和其他插槽名称冲突

Released under the MIT License.

Copyright © 2023-present Chen Xing zhi