BTableHeaderConfig

设置表格列的显示和隐藏。

组件注册

import { BTableHeaderConfig } from '@fesjs/traction-widget';
app.use(BTableHeaderConfig);

代码演示

基础用法

按格式传入需要控制的表格列字段数据，在控制面板中设置表格列的展示。

Play

<template>
    <div>
        <FButton @click="()=>showTableHeaderConfig = !showTableHeaderConfig" style="margin-bottom: 20px">表头设置</FButton>
        <BTableHeaderConfig :originHeaders="originHeaders" v-model:headers="headers" v-model:show="showTableHeaderConfig" type="example"></BTableHeaderConfig>
        <FTable :data="data">
            <FTableColumn prop="title" label="标题" :visible="checkTColShow('title')"></FTableColumn>
            <FTableColumn prop="content" label="内容" :visible="checkTColShow('content')"></FTableColumn>
            <FTableColumn prop="action" label="操作" v-slot="{ row }" :visible="checkTColShow('action')">
                <a class="action-btn" href="javascript:;" @click="viewContent(row)">查看</a>
            </FTableColumn>
        </FTable>
    </div>
</template>
<script setup lang="ts">
import {
    BTableHeaderConfig
} from '@fesjs/traction-widget';
import { FTable, FTableColumn, FButton, FModal } from '@fesjs/fes-design';
import { ref } from 'vue';
// 表格全部列，hidden为true时默认隐藏
const originHeaders = ref<{prop: string, label: string, hidden?: boolean}[]>([
    { prop: 'title', label: '标题' },
    { prop: 'content', label: '内容', hidden: true },
    { prop: 'action', label: '操作' }
]);
// 用于接收当前需要展示的表头的列表
const headers = ref<{prop: string, label: string}[]>([]);
const data = [{ title: '标题1', content: '内容1' }, { title: '标题2', content: '内容2' }, { title: '标题3', content: '内容3' }];
const showTableHeaderConfig = ref<boolean>(false);
// 判断表头是否展示
const checkTColShow = (col: string) => headers.value.map((item) => item.prop).includes(col);
const viewContent = (row: {
    title: string,
    content: string,
}) => {
    FModal.confirm({
        title: '查看',
        content: row.content,
        okText: '确认'
    });
};
</script>
<style>
.action-btn {
    font-weight: 500;
    color: #10b981;
    text-decoration: none;
    transition: color 0.25s;
}
</style>

查看代码

参数说明

TableHeaderConfig Props

属性	说明	类型	默认值	是否必须
originHeaders	全部列	Array(Col)	[]	是
headers	当前显示的列的数组（v-model）	Array({prop: string, label: string})	[]	是
show	控制弹窗显隐（v-model）	Boolean	false	是
type	缓存设置标识，建议每个表格都适用不同的标识 1、设置该属性时，设置将会被保存到当前浏览器的 localStorage 2、未设置该属性时，设置仅为当次有效	String	''	否
getContainer	表头设置Modal挂载的元素，不设置时默认为body	Function	() => document.body	否

Col Props

属性	说明	类型	是否必须
prop	列属性值	String	是
label	列标题值	String	是
hidden	是否默认隐藏此列，用于初始化展示，优先级低于 localStorage	Boolean	否

注意事项

列的显示与否需要通过 Table 组件的 visible 属性来设置，TableHeaderConfig 组件会通过变量 headers 回写当前显示列的数据，因此 Table 组件的 visible 控制可以如下：

const checkTColShow = (col: string) =>
  headers.value.map((item) => item.prop).includes(col);

每个表头设置的 type 不能相同，否则存储到本地存储的历史配置会发生冲突，导致相同 type 的表头设置相互影响。

BTableHeaderConfig #

组件注册 #

代码演示 #

基础用法 #

参数说明 #

TableHeaderConfig Props #

Col Props #

注意事项 #

BTableHeaderConfig

组件注册

代码演示

基础用法

参数说明

TableHeaderConfig Props

Col Props

注意事项