feat: 优化 PureTableBar 组件,添加列展示功能

This commit is contained in:
xiaoxian521
2023-05-09 14:33:19 +08:00
parent 42f5a36145
commit 723cb46eaf
12 changed files with 137 additions and 59 deletions

View File

@@ -12,17 +12,10 @@ export function useDept() {
const loading = ref(true);
const columns: TableColumnList = [
{
type: "selection",
width: 55,
align: "left",
hide: ({ checkList }) => !checkList.includes("勾选列")
},
{
label: "序号",
type: "index",
minWidth: 70,
hide: ({ checkList }) => !checkList.includes("序号列")
minWidth: 70
},
{
label: "部门名称",

View File

@@ -73,6 +73,7 @@ const {
<PureTableBar
title="部门列表"
:columns="columns"
:tableRef="tableRef?.getTableRef()"
@refresh="onSearch"
>
@@ -81,7 +82,7 @@ const {
新增部门
</el-button>
</template>
<template v-slot="{ size, checkList }">
<template v-slot="{ size, dynamicColumns }">
<pure-table
ref="tableRef"
border
@@ -93,8 +94,7 @@ const {
:loading="loading"
:size="size"
:data="dataList"
:columns="columns"
:checkList="checkList"
:columns="dynamicColumns"
:header-cell-style="{
background: 'var(--el-table-row-hover-bg-color)',
color: 'var(--el-text-color-primary)'

View File

@@ -22,16 +22,15 @@ export function useRole() {
});
const columns: TableColumnList = [
{
label: "勾选列", // 如果需要表格多选此处label必须设置
type: "selection",
width: 55,
align: "left",
hide: ({ checkList }) => !checkList.includes("勾选列")
align: "left"
},
{
label: "序号",
type: "index",
width: 70,
hide: ({ checkList }) => !checkList.includes("序号列")
width: 70
},
{
label: "角色编号",

View File

@@ -85,13 +85,13 @@ const {
</el-form-item>
</el-form>
<PureTableBar title="角色列表" @refresh="onSearch">
<PureTableBar title="角色列表" :columns="columns" @refresh="onSearch">
<template #buttons>
<el-button type="primary" :icon="useRenderIcon(AddFill)">
新增角色
</el-button>
</template>
<template v-slot="{ size, checkList }">
<template v-slot="{ size, dynamicColumns }">
<pure-table
border
align-whole="center"
@@ -100,8 +100,7 @@ const {
:loading="loading"
:size="size"
:data="dataList"
:columns="columns"
:checkList="checkList"
:columns="dynamicColumns"
:pagination="pagination"
:paginationSmall="size === 'small' ? true : false"
:header-cell-style="{

View File

@@ -21,17 +21,10 @@ export function useUser() {
background: true
});
const columns: TableColumnList = [
{
type: "selection",
width: 55,
align: "left",
hide: ({ checkList }) => !checkList.includes("勾选列")
},
{
label: "序号",
type: "index",
width: 70,
hide: ({ checkList }) => !checkList.includes("序号列")
width: 70
},
{
label: "用户编号",

View File

@@ -88,13 +88,13 @@ const {
</el-form-item>
</el-form>
<PureTableBar title="用户管理" @refresh="onSearch">
<PureTableBar title="用户管理" :columns="columns" @refresh="onSearch">
<template #buttons>
<el-button type="primary" :icon="useRenderIcon(AddFill)">
新增用户
</el-button>
</template>
<template v-slot="{ size, checkList }">
<template v-slot="{ size, dynamicColumns }">
<pure-table
border
align-whole="center"
@@ -102,8 +102,7 @@ const {
:loading="loading"
:size="size"
:data="dataList"
:columns="columns"
:checkList="checkList"
:columns="dynamicColumns"
:pagination="pagination"
:paginationSmall="size === 'small' ? true : false"
:header-cell-style="{