# Table

**Repository Path**: ren_jinming/table

## Basic Information

- **Project Name**: Table
- **Description**: 基于vue3+elElmentPlus封装的table组件，支持通过配置一键生成表格和筛选表单
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2024-01-25
- **Last Updated**: 2025-02-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## defaultTable组件使用及参数说明文档

- 该组件是基于element-plus  v2.3.1版本进行二次封装的表格组件。如果下是该组件的功能支持项，其他版本也是可以用的，主要封装思路是通过配置对象和参数实现自动生成表格项和筛选表单，主要功能如下。

  0. 自动生成页面布局，表格+表格筛选表单。
1. 表格数据渲染
  2. 自动生产表格筛选表单
  3. 分页器
  4. 单选/多选
  5. 表格插槽

- 先来看看效果, template+sctipt共计不到六十行代码(抛开配置文件)，

  ![image-20231206163146061](C:\Users\86183\AppData\Roaming\Typora\typora-user-images\image-20231206163146061.png)

##### props参数

|    **属性名**    |                           **说明**                           |    **类型**     | **默认值** |
| :--------------: | :----------------------------------------------------------: | :-------------: | :--------: |
|     loading      |                       是否为加载中状态                       |     boolean     |   false    |
|      radio       |                         是否支持单选                         |     boolean     |   false    |
|      check       |                         是否支持多选                         |     boolean     |   false    |
|    tableData     |                           表格数据                           |      Array      |     []     |
|      column      |           表格项配置对象，详情看下面的columnConfig           | Object \| Array |     []     |
|    pageConfig    |          分页器配置对象，如果不传默认是不显示分页器          |     Object      |     {}     |
|  isOnmountedGet  |              是否在onMounted时执行formQuery事件              |     boolean     |    true    |
|      rowKey      |                        tabel的rowKey,                        |     string      |     id     |
| defaultExpandAll |             当table为树形控件时是否默认展开全部              |     boolean     |   false    |
|    formConfig    | 表单配置项，同columnConfig表格配置的对象形式，没有column，这里配置会覆盖columnConfig的配置 |     Object      |            |



##### columnConfig表格配置对象

column支持数组和对象形式，对象形式主要用于一些扩展功能配置。

- 列描述数据对象，是 columns 中的一项

###### 数组形式配置

|   **属性名**    |                           **说明**                           | 是否必传 |                  **类型**                   | **默认值** |
| :-------------: | :----------------------------------------------------------: | -------- | :-----------------------------------------: | :--------: |
|      label      |                         列头显示文字                         | 是       |                   string                    |            |
|      prop       |                       列数据对应的key                        | 是       |                   string                    |            |
|     search      |                      该字段是否支持筛选                      |          |                   boolean                   |            |
|    searchKey    |       如果筛选字段和列表字典不同时，单独设置筛选的字段       |          |                   string                    |            |
|      type       | 筛选时收集数据的形式，input \| select \| selectCheck\| date\| daterange\| model。model时是input,点击input的时候会触发model事件 (表单对象,数据key) |          |                   string                    |   input    |
|   placeholder   |                     筛选表单输入框占位符                     |          |                   string                    |            |
|      page       | 是否在表格中显示，如果false则不会在页面上显示，主要用于在有些情况表单筛选需要，但是页面展示不需要 |          |                   boolean                   |            |
|      align      |            表格对齐方式<br />left\|center\|right             |          |                   center                    |            |
|      width      |                          表格列宽度                          |          |                   number                    |            |
|   labelWidth    |                    表单筛选时lanel的宽度                     |          |                   number                    |            |
|      fixed      |                   列表定位，支持left,right                   |          |                   string                    |            |
|    selectArr    | 在type为select时用于可选的数据，默认key取label，值取value，可通过下面的selectProp进行配置 |          |                    Array                    |     []     |
|  getSelectData  | 远程获取选择项数据<br />(row:tableColcom,resolve:Function获取到数据调用这个这个方法传入数据,reject:Function)=>void |          |                                             |            |
|   selectProp    |    配置selectArr的取值字段，{label:'label',value:'value'}    |          |                   Object                    |            |
|    filterate    | 表格过滤函数，用于某些数据需要通过处理后进行显示，比较金额保留后两位 |          | function(vale,dataItem,index){return value} |            |
|     default     |                        表单筛选默认值                        |          |                                             |            |
|     format      |                type为日期选择时，指定日期格式                |          |                   string                    | YYYY-MM-DD |
|    daterange    | 日期段选择时，开始时间和结束时间的对应字段，如 ['startTime','endTime'] |          |            Array<string,string>             |            |
| overflowTooltip |       table列是否溢出隐藏，并在鼠标hover时弹出显示全部       |          |                   boolean                   |    true    |

###### 对象形式

|   属性名   |                           **说明**                           | **类型** | **默认值** |
| :--------: | :----------------------------------------------------------: | :------: | :--------: |
|   search   | 是否开启表格筛选功能, 如果设置为false, 那么就算在表格配置对象中写search=true也不会生产表格筛选 | boolean  |    true    |
| labelWidth |                 统一设置筛选表单的label宽度                  |          |            |
|  isQuery   |                       是否显示查询按钮                       |   true   |            |
| isDefault  |                 是否在重置时依然读取默认值,                  |   true   |            |
|   column   |     表格列配置对象,和上面的columnConfig表格配置对象一致      |  Array   |     []     |
|            |                                                              |          |            |

##### 组件event事件

|   事件名称   |                           **说明**                           |       **参数**        | **默认值** |
| :----------: | :----------------------------------------------------------: | :-------------------: | :--------: |
|  pageChange  |                    分页和总页数改变时触发                    |      pageConfig       |            |
| radioChange  |                          单选时触发                          |        dataRow        |            |
|  formQuery   | 筛选表单在重置或查询时触发,还会在表格组件的onMounted钩子执行时触发一次(根据isOnmountedGet属性判断是否执行)，目的是为了在第一次获取数据就带上筛选条件 | formParams,pageConfig |            |
| selectChange |                          多选时触发                          |       selectArr       |            |
|    model     |                筛选表单type为model时点击触发                 |      item,params      |            |

##### slot插槽

|              插槽名称              |                           **说明**                           | **参数** | **默认值** |
| :--------------------------------: | :----------------------------------------------------------: | :------: | :--------: |
|               middle               | 表格筛选表单和表格中间位置，通常用于写添加按钮或者其他一些按钮 |          |            |
| 表格插槽，名称根据配置项的prop一致 |                          带参数row                           |          |            |



##### defineExpose方法

|              方法名称              |                           **说明**                           | **参数** | 返回值 |
| :--------------------------------: | :----------------------------------------------------------: | :------: | :--------: |
|               addRestSelection               | 用于勾选或者取消勾选数据(多选) | row[] |            |
| addRestradio |                      用于勾选或者取消勾选数据(单选)           | row |            |
| getFormData | 手动获取筛选表单的数据 |  | formParams |
| reset | 重置筛选表单，并page回到第一页，调用后会再次触发formQuery事件 |  |  |
| query | 手动触发筛选表单的查询事件，调用后会再次触发formQuery事件 |  |  |



- 有可能文档和代码并没有完全同步,如果有没有同步的情况可自行查看代码

##### column的ts接口类型

```ts
type getSelectFun = (val:Array<any>)=>void
/**
   * table表格配置对象，数组配置
   */
  interface tableColcom {
    /**
     * table列描述
     */
    label:string
    /**
     * table列的value字段
     */
    prop:string
    /**
     * table列固定方向
     */
    fixed?:'left'|'right'
    /**
     * 是否在页面中进行展示该字段
     */
    page?:Boolean
    /**
     * tabel列的对齐方式，默认center
     */
    align?:'left'|'center'|'right',
    /**
     * 是否对该字段开启筛选功能
     */
    search?:Boolean
    /**
     * 如果筛选字段和列表字典不同时，单独设置筛选的字段
     */
    searchKey?:string
    /**
     * 字段的筛选类型。model时是input,点击input的时候会触发model事件 (表单对象,数据key)
     */
    type?:'input'|'select' | 'selectCheck' | 'date' | 'daterange' | 'model',
    /**
     * 筛选表单输入框占位符
     */
    placeholder?:string
    /**
     * 如果type为select时，用于设置可选项，默认取label和value字段
     */
    selectArr?:Array<Object>
    /**
     * 远程获取选择项数据 
     * @param row 配置项item
     * @param resolve 传入数据
     * @param reject 数据获取失败时调用
     */
    getSelectData?:(row:tableColcom,resolve:getSelectFun,reject:Function)=>void
    /**
     * 自定select的label和value字段
     */
    selectProp?:{
      /**下拉选的label取值字段 */
      label:string,
      /**下拉选的value取值字段 */
      value:string
    },
    /**
     * 筛选表单的默认值
     */
    default?:any
    /**
     * 日期段选择时，开始时间和结束时间的对应字段，如 ['startTime','endTime']
     */
    daterange?:Array<string,string>
    /**
     * type为日期选择时，指定日期格式 
     * 默认值：YYYY-MM-DD
     */
    format?:string
    /**
     * 筛选表单label宽度
     */
    labelWidth?:number
    /**
     * 处理自定值
     * @param itemValue 当前项的值
     * @param row 当前项
     * @param index 下标
     * @returns 
     */
    filterate?:(itemValue:any,row:Object,index:number)=> any
    /**
     * table列宽度
     */
    width?:number|string
    /**
     * table列是否溢出隐藏，并在鼠标hover时弹出显示全部
     */
    overflowTooltip?:true | false
  }
  /**
   * table表格配置对象，对象配置
   */
  interface tableColcomObjOption {
    /**是否开启表单筛选功能 */
    search?:boolean
    /**统一设置筛选表单的label宽度 */
    labelWidth?:number|string
    /**是否显示查询按钮 */
    isQuery?:boolean
    /**是否在重置时依然读取默认值, */
    isDefault?:boolean
    /**表格配置 */
    column:tableColcom[]
  }
```

#### 使用案例table简单版

- setop+ts

```vue
<template>
  <div class="app-container">
    <Table
      ref="tableRef"
      :loading="loading"
      check
      :tableData="paegData"
      :column="pageListColcom"
      :pageConfig="pageConfig"
      @selectChange="selectChange"
      @formQuery="queryForm"
    >
      <template #middle>
          <el-button :disabled="!selectArrs.length" @click="delMenuItem(selectArrs)" type="danger"><i-ep-delete />删除</el-button>
        <el-button type="primary" :loading="loading" @click="exportData"><i-ep-plus/>导出</el-button>
      </template>
      <template #option="{row}">
		<el-button type="primary" v-if="row.menuType != 'F'"  link><i-ep-plus/>新增</el-button>
        <el-button type="primary" link><i-ep-EditPen/> 修改</el-button>
        <el-button @click="delMenuItem([row])" type="danger" link><i-ep-delete />删除</el-button>
      </template>
    </Table>
  </div>
</template>

<script setup lang="ts">
  import { download } from '@/utils'
    import {MessageBox} from '@/utils/message'
import { pageListColcom } from './config'

  const router = useRouter()
  const loading = ref(false)
  const paegData = ref<any[]>([])
  const selectArrs = ref<any>([])
  let pageConfig:PageQuery = reactive({
    pageNum:1,
    pageSize:10,
    pageTotal:0
  })
  let formData = {}
  function queryForm(query:any,page:PageQuery){
    formData = query
    pageConfig = page
    getData()
  }
  function getData(){
    return
    loading.value = true
    Api({
      ...formData,
      pageNum:pageConfig.pageNum,
      pageSize:pageConfig.pageSize,
    }).then(res=>{
      paegData.value = res.rows
      pageConfig.pageTotal = res.total
    }).finally(()=> loading.value = false)
  }
  function exportData(){
    return
    loading.value = true
    Api({...formData}).then(res=>{
      download(res.msg)
      ElMessage.success('导出成功')
    }).finally(()=> loading.value = false)
  }
  async function delMenuItem(arrs:any[]){
    await MessageBox('提示', '确定删除吗？', 'warning')
    const ids = arrs.map(item=>item.id).join(',')
    return
    loading.value = true
    await delMenu(ids).finally(()=> loading.value = false)
    ElMessage.success('删除成功')
    getList()
  }
  function selectChange(arrs:any[]){
    selectArrs.value = arrs
  }
</script>

<style scoped>

</style>
```



#### 使用案例table完整版

- setup+ts

```vue
<template>
  <div class="app-container">
    <Table
      ref="tableRef"
      :loading="loading"
      check
      :tableData="paegData"
      :column="pageListColcom"
      :pageConfig="pageConfig"
      @formQuery="queryForm"
    >
      <template #middle>
        <el-button type="primary" @click="addDictRef.show()"><i-ep-plus/>添加字典</el-button>
        <el-button type="primary"><i-ep-plus/>导出</el-button>
      </template>
      <template #status="{row}">
        <el-switch
          :loading="row.load ? true : false"
          v-model="row.status"
          active-value="1"
          inactive-value="0"
          active-color="var(--el-color-primary)"
          inactive-color="var(--el-fill-color-dark)"
          @change="(val) => handelSwitch(val, row)"
        />
      </template>
      <template #dictType="{row}">
        <a @click="dictData(row)" style="color: var(--el-color-primary);">{{ row.dictType }}</a>
      </template>
      <template #option="{row}">
        <el-button type="primary" @click="addDictRef.show(row)" link>编辑</el-button>
        <el-button type="danger" @click="delitem(row)" link>删除</el-button>
      </template>
    </Table>
    <addDict ref="addDictRef" @success="getData"/>
  </div>
</template>

<script setup lang="ts">
  import { pageListColcom } from './config'
  import {queryDict,DictItem} from '@/types/system/dict'
  import {getDictList,editDict,delDict} from '@/api/system/dict';
  import addDict from './components/addDict.vue'
  import {MessageBox} from '@/utils/message'
  const router = useRouter()
  const loading = ref(false)
  const paegData = ref<any[]>([])
  const addDictRef = ref()
  let pageConfig:PageQuery = reactive({
    pageNum:1,
    pageSize:10,
    pageTotal:0
  })
  let formData = {}
  function queryForm(query:queryDict,page:PageQuery){
    formData = query
    pageConfig = page
    getData()
  }
  function getData(){
    loading.value = true
    getDictList({
      ...formData,
      pageNum:pageConfig.pageNum,
      pageSize:pageConfig.pageSize,
    }).then(res=>{
      paegData.value = res.rows
      pageConfig.pageTotal = res.total
    }).finally(()=> loading.value = false)
  }
  async function handelSwitch(val:string,row:DictItem){
    if(!row.id)return
    loading.value = true
    await editDict({
      id:row.id,
      status:val,
      dictName:row.dictName,
      dictType:row.dictType
    }).catch(()=> val =='1' ? (row.status = '0') : (row.status = '1')).finally(()=> loading.value = false)
    getData()
  }
  async function delitem(row:DictItem){
    await MessageBox('提示','确认删除？')
    loading.value = true
    await delDict(row.id as string).finally(()=> loading.value = false)
    ElMessage.success('删除成功')
    getData()
  }
  function dictData(row:DictItem){
    router.push({name:'DictData',query:{id:row.id,dictType:row.dictType,dictName:row.dictName}})
  }
</script>

<style scoped>

</style>
```



###### config文件文件

```js
import {moment} from '@/utils/index';
/**
 * 字典列表配置
 */
export const pageListColcom:tableColcom[] = [
  {
    label:'字典编号',
    prop:'id',
  },
  {
    label:'字典名称',
    prop:'dictName',
    search:true
  },
  {
    label:'字典类型',
    prop:'dictType',
    search:true
  },
  {
    label:'状态',
    prop:'status',
    search:true,
    type:'select',
    searchKey:'visible',
    selectArr:[
      {label:'正常',value:'0'},
      {label:'停用',value:'1'},
    ],
  },
  {
    label:'备注',
    prop:'dictDesc',
  },
  {
    label:'创建时间',
    prop:'createTime',
    search:true,
    type:'daterange',
    daterange:['beginTime','endTime'],
    filterate(text:string){
      return moment(text).format('YYYY-MM-DD hh:mm:ss')
    }
  },
  {
    label:'操作',
    prop:'option',
    fixed:'right'
  }
]
```





#### 添加弹窗模板代码

```vue
<template>
  <el-dialog 
    width="40%" 
    title="添加字典"
    :model-value="showDialog"  
    :close-on-click-modal="false"
    draggable
    @close="closeDialog()"
  >
    <el-form ref="formRef" inline label-width="100" :model="params" :rules="rules">
      <el-form-item label="字典名称" prop="dictName">
        <el-input class="w-[210px]" v-model="params.dictName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="字典关键字" prop="dictType">
        <el-input :disabled="params.id != ''" class="w-[210px]" v-model="params.dictType" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <!-- 单选 -->
        <el-select v-model="params.status">
          <el-option label="正常" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字典描述" prop="dictDesc">
        <el-input type="textarea" v-model="params.dictDesc" placeholder="请输入"></el-input>
      </el-form-item>
    </el-form>
    <div class="footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button :loading="loading" type="primary" @click="submit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
  import {addDict,editDict} from '@/api/system/dict';
  const emit = defineEmits(['success'])
  const params = reactive({
    id:'',
    dictName:'',
    dictType:'',
    status:'1',
    dictDesc:'',
  })
  const loading = ref()
  const formRef = ref()
  const rules = {
    dictName:[
      {required:true,message:'请输入字典名称',trigger:'blur'}
    ],
    dictType:[
      {required:true,message:'请输入字典关键字',trigger:'blur'}
    ],
    status:[
      {required:true,message:'请输入状态',trigger:'change'}
    ]
  }
  const showDialog = ref(false)
  async function submit(){
    // 校验表单
    await formRef.value.validate()
    loading.value = true
    const p = params.id ? editDict({...params}) : addDict({...params})
    await p.finally(()=> loading.value = false)
    ElMessage.success('操作成功')
    emit('success')
    closeDialog()
  }
  function show(row:any){
    showDialog.value = true
    if(row){
      nextTick(()=> Object.keys(params).forEach(key=> (params[key] = row[key])))
    }
  }
  function closeDialog(){
    formRef.value.resetFields()
    params.id = ''
    showDialog.value = false
  }

  defineExpose({show})
</script>

<style scoped>

</style>
```

##### 弹窗模板代码

```vue
<template>
  <el-dialog 
    width="40%" 
    title="订单详情"
    :model-value="showDialog"  
    :close-on-click-modal="false"
    draggable
    @close="closeDialog()"
  >
  
  </el-dialog>
</template>

<script setup lang="ts">
const showDialog = ref(false)
function show(){
  showDialog.value = true
}
function closeDialog(){
  showDialog.value = false
}
defineExpose({show})
</script>

<style lang="scss" scoped>

</style>
```


#### 代码模板配置

为了快速的生成模板代码，可以直接代码片段配置到vscode 一键生成

##### vue的模板配置如下

```json
{
     // ...其它片段配置
    // 注意 该文档支支持单行注释，每一组key:value就是一组代码片段，可以配置多个
    "vue.vcc.TableTemplate": {
		"prefix": "tabTemp",
		"body": [
			"<template>",
			"  <div class=\"app-container\">",
			"    <Table",
			"      ref=\"tableRef\"",
			"      :loading=\"loading\"",
			"      check",
			"      :tableData=\"paegData\"",
			"      :column=\"pageListColcom\"",
			"      :pageConfig=\"pageConfig\"",
			"      @selectChange=\"selectChange\"",
			"      @formQuery=\"queryForm\"",
			"    >",
			"      <!-- <template #middle>",
			"        <el-button type=\"primary\" :loading=\"loading\" @click=\"exportData\"><i-ep-plus/>导出</el-button>",
			"      </template> -->",
			"      <template #option=\"{row}\">",
			"        ",
			"      </template>",
			"    </Table>",
			"  </div>",
			"</template>",
			"<script setup lang=\"ts\">",
			"  import { pageListColcom } from './config'",
			"  const loading = ref(false)",
			"  const paegData = ref<any[]>([])",
			"  const selectArrs = ref<any>([])",
			"  let pageConfig:PageQuery = reactive({",
			"    pageNum:1,",
			"    pageSize:10,",
			"    pageTotal:0",
			"  })",
			"  let formData = {}",
			"  function queryForm(query:any,page:PageQuery){",
			"    formData = query",
			"    pageConfig = page",
			"    getData()",
			"  }",
			"  function getData(){",
			"    //loading.value = true",
			"    //Api({",
			"    //  ...formData,",
			"    //  pageNum:pageConfig.pageNum,",
			"    //  pageSize:pageConfig.pageSize,",
			"    //}).then(res=>{",
			"    //  paegData.value = res.rows",
			"    //  pageConfig.pageTotal = res.total",
			"    //}).finally(()=> loading.value = false)",
			"  }",
			"  function exportData(){",
			"    // Api({...formData}).then(res=>{",
			"    //   // import { download } from '@/utils'",
			"    //   download(res.msg)",
			"    //   ElMessage.success('导出成功')",
			"    // }).finally(()=> loading.value = false)",
			"  }",
			"  async function delMenuItem(arrs:any[]){",
			"    // await MessageBox('提示', '确定删除吗？', 'warning')",
			"    // const ids = arrs.map(item=>item.id).join(',')",
			"    // loading.value = true",
			"    // await delMenu(ids).finally(()=> loading.value = false)",
			"    // ElMessage.success('删除成功')",
			"    // getList()",
			"  }",
			"  function selectChange(arrs:any[]){",
			"    selectArrs.value = arrs",
			"  }",
			"</script>",
			"<style scoped>",
			"",
			"</style>"
		],
		"description": "Table Template"
	}
}
```

##### config文件的模板配置

```json
{
     // ...其它片段配置
    "table.config": {
		"prefix": "tableConfig",
		"body": [
			"export const pageListColcom:tableColcom[]=[",
			"  {",
			"    label: '${1:列label}',",
			"    prop: '${2:列prop}',",
			"  }",
			"]",
		],
		"description": "table.config"
	}
}
```

##### 添加数据弹窗模板
```json
{
  // ...其它片段配置
  "vue.add.temp":{
		"prefix": "addTemp",
		"body": [
			"<template>",
			"  <el-dialog",
			"    width=\"60%\"",
			"    title=\"$1\"",
			"    :model-value=\"showDialog\"",
			"    :close-on-click-modal=\"false\"",
			"    @close=\"closeDialog()\"",
			"  >",
			"    <el-form ref=\"formRef\" :model=\"form\" label-width=\"80px\" :rules=\"rules\">",
			"      $2",
			"    </el-form>",
			"    <div class=\"footer\">",
			"      <el-button>关闭</el-button>",
			"      <el-button type=\"primary\" :loading=\"loading\" @click=\"submit\">保存</el-button>",
			"    </div>",
			"</el-dialog>",
			"</template>",
			"",
			"<script setup lang=\"ts\">",
			"  const showDialog = ref(false)",
			"  const formRef = ref()",
			"  const loading = ref(false)",
			"  const rules = {",
			"",
			"  }",
			"  const form = reactive({",
			"",
			"  })",
			"  const submit = async () => {",
			"    await formRef.value.validate()",
			"",
			"  }",
			"  const closeDialog = () => {",
			"    formRef.value.resetFields()",
			"    showDialog.value = false",
			"  }",
			"  const show = (data: any) => {",
			"    showDialog.value = true",
			"  }",
			"  defineExpose({",
			"    show",
			"  })",
			"</script>",
			"",
			"<style scoped>",
			"",
			"</style>"
		],
		"description": "add Template"
	}
}
```