CustomTableColumns 表单配置弹窗

使用

1. 配置数据保存在localStorage

<template> 
  <dg-custom-table-columns
    ref="customTableColumnsRef"
    :table-name="tableName"
    :default-columns="defaultColumns"
    @confirm="configTableColumns"
  ></dg-custom-table-columns>
</template>


<script setup>
import { Column, useCustomTableColumns } from '@degon/admin-component-vue3'

const tableName = 'test_table'

const defaultColumns = [
  { align: 'center', isVisible: true, label: '全选', type: 'checkbox', prop: 'checkbox' },
  { align: 'center', isVisible: true, label: '序号', type: 'order', prop: 'order' },
  { align: 'center', isVisible: true, label: 'id', prop: 'id' },
  { align: 'center', isVisible: true, prop: 'date', label: '日期' },
  { align: 'center', isVisible: true, prop: 'name', label: '姓名' },
  { align: 'center', isVisible: true, prop: 'status', label: '状态', type: 'slot' },
  { align: 'center', prop: 'test', label: '改变状态', type: 'slot' }
] as Column[]

const { customTableColumnsRef, renderColumns } = useCustomTableColumns(
  tableName,
  defaultColumns
)

const configTableColumns = (tableName: string, columns: any[]) => {
  renderColumns.value = columns
  customTableColumnsRef.value.hide()
}
</script>

2. 配置数据保存在后端，需传remote-columns

<template> 
  <dg-custom-table-columns
    ref="customTableColumnsRef"
    :table-name="tableName"
    :default-columns="defaultColumns"
    :remote-config-data="remoteConfigData"
    @confirm="configTableColumns"
  ></dg-custom-table-columns>
</template>


<script setup>
import { Column, useCustomTableColumns } from '@degon/admin-component-vue3'

const tableName = 'test_table'

const defaultColumns = [
  { align: 'center', isVisible: true, label: '全选', type: 'checkbox', prop: 'checkbox' },
  { align: 'center', isVisible: true, label: '序号', type: 'order', prop: 'order' },
  { align: 'center', isVisible: true, label: 'id', prop: 'id' },
  { align: 'center', isVisible: true, prop: 'date', label: '日期' },
  { align: 'center', isVisible: true, prop: 'name', label: '姓名' },
  { align: 'center', isVisible: true, prop: 'status', label: '状态', type: 'slot' },
  { align: 'center', prop: 'test', label: '改变状态', type: 'slot' }
] as Column[]


const { customTableColumnsRef, renderColumns, normalizeTableColumns } = useCustomTableColumns(
  tableName,
  defaultColumns
)

const configTableColumns = (tableName: string, columns: Column[], configData: ConfigData) => {
  renderColumns.value = columns
  // 此处调用api保存configData
  customTableColumnsRef.value.hide()
}

const remoteConfigData = ref()
const getRemoteConfigData = async () => {
  // 从后端接口获取配置数据configData
  const { data } = await getRemoteConfigDataApi()
  remoteConfigData.value = data
  renderColumns.value = normalizeTableColumns(data)
}

getRemoteConfigData()
</script>

Typescript类型

:::demo

<script lang="ts">
import { ConfigData } from '@degon/admin-component-vue3'
</script>

:::

Attributes

参数	类型	说明	可选值	默认值	required
tableName	string	表格名称，用作标识符	—	'DgTableColumns'	是
defaultColumns	Column[]	默认字段配置	—	[]	是
remoteConfigData	ConfigData	配置数据保存在后端的配置数据	—		否
fixedControl	string	固定方式, 'switch' 和 'radio'	—	'switch'	否
exclude	string[]	不参与配置的字段	-	['checkbox', 'order']	否

Methods

方法名	说明	参数
show	打开弹窗	-
hide	关闭弹窗	-

Events

事件名	说明	参数
confirm	确定事件, configData可传给后端保存	tableName, columns, configData