vue vxe-table 實現(xiàn)列個性化自定義列功能，自動記憶用戶的操作列狀態(tài)，完整的詳細教程

vue vxe-table 實現(xiàn)列個性化自定義列功能，自動記憶用戶的操作列狀態(tài)，完整的詳細教程
在開發(fā) ERP 系統(tǒng)或后臺管理系統(tǒng)時，經(jīng)常需要用到的記憶列狀態(tài)的功能，就是不同用戶根據(jù)不同的列表頁面，比如將用戶主動將常用的列顯示出來和不常用的列隱藏，列凍結(jié)狀態(tài)等，刷新頁面或者下次進入頁面后自動回復(fù)成上次操作的列狀態(tài)，這個功能就非常有用了。

查看官網(wǎng)：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table

啟用功能

通過設(shè)置 toolbar-config.custom 啟用列個性化設(shè)置功能，支持工具欄模式、彈出窗口模式、抽屜模式顯示個性化列操作面板，非常靈活的設(shè)置項。通過給表格設(shè)置 id 屬性，確保每個表格的 id 必須是唯一的，記憶狀態(tài)是根據(jù) id 進行數(shù)據(jù)緩存的，如果不同表格 id 出現(xiàn)重復(fù)，就會導(dǎo)致不同表格的狀態(tài)數(shù)據(jù)混亂。

工具欄模式

彈出窗口模式

抽屜模式

列寬狀態(tài)記憶

通過 custom-config.allowResizable 啟用，啟用后用戶可以通過拖拽列寬自定義每一列的寬度，非常靈活

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  id: 'myCustomStorage1',
  toolbarConfig: {
    custom: true
  },
  customConfig: {
    storage: true,
    allowVisible: false,
    allowFixed: false,
    allowResizable: true,
    allowSort: false,
    allowGroup: false,
    allowValues: false,
    storeOptions: {
      visible: false, // 保存列可視狀態(tài)
      resizable: true, // 保存列寬調(diào)整狀態(tài)
      sort: false, // 保存列順序狀態(tài)
      fixed: false, // 保存列凍結(jié)狀態(tài)
      aggGroup: false, // 保存列的行分組狀態(tài)
      aggFunc: false// 保存列聚合函數(shù)狀態(tài)
    }
  },
  columnConfig: {
    drag: true,
    resizable: true
  },
  columns: [
    { field: 'seq', type: 'seq', width: 90 },
    { field: 'name', title: 'Name' },
    { field: 'role', title: 'role' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'address' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ]
})
</script>

列顯示/隱藏狀態(tài)記憶

通過 custom-config.allowVisible 啟用，啟用后用戶手動切換每一列的顯示與隱藏，非常方便對常用列顯示出來，不常用的列可以直接隱藏掉

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  id: 'myCustomStorage2',
  toolbarConfig: {
    custom: true
  },
  customConfig: {
    storage: true,
    allowVisible: true,
    allowFixed: false,
    allowResizable: false,
    allowSort: false,
    allowGroup: false,
    allowValues: false,
    storeOptions: {
      visible: true, // 保存列可視狀態(tài)
      resizable: false, // 保存列寬調(diào)整狀態(tài)
      sort: false, // 保存列順序狀態(tài)
      fixed: false, // 保存列凍結(jié)狀態(tài)
      aggGroup: false, // 保存列的行分組狀態(tài)
      aggFunc: false// 保存列聚合函數(shù)狀態(tài)
    }
  },
  columnConfig: {
    drag: true,
    resizable: true
  },
  columns: [
    { field: 'seq', type: 'seq', width: 90 },
    { field: 'name', title: 'Name' },
    { field: 'role', title: 'role' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'address' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ]
})
</script>

列凍結(jié)狀態(tài)記憶

通過 custom-config.allowFixed 啟用，啟用后用戶可以將最常用的列凍結(jié)在可視區(qū)內(nèi)，方便操作

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  id: 'myCustomStorage3',
  toolbarConfig: {
    custom: true
  },
  customConfig: {
    storage: true,
    allowVisible: false,
    allowFixed: true,
    allowResizable: false,
    allowSort: false,
    allowGroup: false,
    allowValues: false,
    storeOptions: {
      visible: false, // 保存列可視狀態(tài)
      resizable: false, // 保存列寬調(diào)整狀態(tài)
      sort: false, // 保存列順序狀態(tài)
      fixed: true, // 保存列凍結(jié)狀態(tài)
      aggGroup: false, // 保存列的行分組狀態(tài)
      aggFunc: false// 保存列聚合函數(shù)狀態(tài)
    }
  },
  columnConfig: {
    drag: true,
    resizable: true
  },
  columns: [
    { field: 'seq', type: 'seq', width: 90 },
    { field: 'name', title: 'Name' },
    { field: 'role', title: 'role' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'address' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ]
})
</script>

列排序狀態(tài)記憶

通過 custom-config.allowFixed 啟用，啟用后用戶可對所有進行拖拽排序，將常用的列排序到前面去

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  id: 'myCustomStorage4',
  toolbarConfig: {
    custom: true
  },
  customConfig: {
    storage: true,
    allowVisible: false,
    allowFixed: false,
    allowResizable: false,
    allowSort: true,
    allowGroup: false,
    allowValues: false,
    storeOptions: {
      visible: false, // 保存列可視狀態(tài)
      resizable: false, // 保存列寬調(diào)整狀態(tài)
      sort: true, // 保存列順序狀態(tài)
      fixed: false, // 保存列凍結(jié)狀態(tài)
      aggGroup: false, // 保存列的行分組狀態(tài)
      aggFunc: false// 保存列聚合函數(shù)狀態(tài)
    }
  },
  columnConfig: {
    drag: true,
    resizable: true
  },
  columns: [
    { field: 'seq', type: 'seq', width: 90 },
    { field: 'name', title: 'Name' },
    { field: 'role', title: 'role' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'address' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ]
})
</script>

透視表分組和聚合函數(shù)（需要注意該功能是企業(yè)版的示例）

通過拖拽列到聚合列表，自動對數(shù)據(jù)進行合計匯總。設(shè)置 custom-config.allowGroup 和 custom-config.allowValues 啟用拖拽功能，啟用后用戶可以對列表的數(shù)據(jù)進行手動分組以及對指定字段進行數(shù)據(jù)統(tǒng)計、匯總等復(fù)雜操作，無需開發(fā)介入

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  id: 'myCustomStorage5',
  toolbarConfig: {
    custom: true
  },
  customConfig: {
    storage: true,
    allowVisible: false,
    allowFixed: false,
    allowResizable: false,
    allowSort: false,
    allowGroup: true,
    allowValues: true,
    storeOptions: {
      visible: false, // 保存列可視狀態(tài)
      resizable: false, // 保存列寬調(diào)整狀態(tài)
      sort: false, // 保存列順序狀態(tài)
      fixed: false, // 保存列凍結(jié)狀態(tài)
      aggGroup: true, // 保存列的行分組狀態(tài)
      aggFunc: true // 保存列聚合函數(shù)狀態(tài)
    }
  },
  columnConfig: {
    drag: true,
    resizable: true
  },
  columns: [
    { field: 'seq', type: 'seq', width: 90 },
    { field: 'name', title: 'Name' },
    { field: 'role', title: 'role' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'address' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ]
})
</script>

完整狀態(tài)記憶功能

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  id: 'myCustomStorage6',
  toolbarConfig: {
    custom: true
  },
  customConfig: {
    storage: true,
    allowVisible: true,
    allowFixed: true,
    allowResizable: true,
    allowSort: true,
    allowGroup: true,
    allowValues: true,
    storeOptions: {
      visible: true, // 保存列可視狀態(tài)
      resizable: true, // 保存列寬調(diào)整狀態(tài)
      sort: true, // 保存列順序狀態(tài)
      fixed: true, // 保存列凍結(jié)狀態(tài)
      aggGroup: true, // 保存列的行分組狀態(tài)
      aggFunc: true // 保存列聚合函數(shù)狀態(tài)
    }
  },
  columnConfig: {
    drag: true,
    resizable: true
  },
  columns: [
    { field: 'seq', type: 'seq', width: 90 },
    { field: 'name', title: '產(chǎn)品名稱', rowGroupNode: true },
    {
      title: '分組1',
      field: 'group1',
      children: [
        { field: 'attr2', title: 'Attr2' },
        { field: 'department', title: '部門' }
      ]
    },
    {
      title: '分組3',
      field: 'group3',
      children: [
        { field: 'plannedAmount', title: '實際銷售' },
        { field: 'attr1', title: 'Attr1' },
        {
          title: '分組4',
          field: 'group4',
          children: [
            { field: 'actualAmount', title: '計劃銷售' },
            { field: 'attr4', title: 'Attr4' },
            { field: 'attr8', title: 'Attr8' }
          ]
        }
      ]
    },
    { field: 'date', title: '日期' }
  ],
  data: [
    { id: 10001, name: '筆記本', department: '銷售1部', actualAmount: 80, plannedAmount: 100, date: '2025-02-01' },
    { id: 10002, name: '手機', department: '銷售3部', actualAmount: 140, plannedAmount: 120, date: '2025-01-01' },
    { id: 10003, name: '鍵盤', department: '銷售2部', actualAmount: 220, plannedAmount: 200, date: '2025-05-01' },
    { id: 10004, name: '鼠標(biāo)', department: '銷售1部', actualAmount: 110, plannedAmount: 140, date: '2025-01-01' },
    { id: 10005, name: '筆記本', department: '銷售2部', actualAmount: 40, plannedAmount: 90, date: '2025-01-01' },
    { id: 10006, name: '鼠標(biāo)', department: '銷售4部', actualAmount: 40, plannedAmount: 120, date: '2025-03-01' },
    { id: 10007, name: '鍵盤', department: '銷售1部', actualAmount: 234, plannedAmount: 300, date: '2025-05-01' },
    { id: 10008, name: '手機', department: '銷售4部', actualAmount: 146, plannedAmount: 240, date: '2025-11-01' },
    { id: 10009, name: '筆記本', department: '銷售3部', actualAmount: 78, plannedAmount: 120, date: '2025-05-01' },
    { id: 10010, name: '筆記本', department: '銷售4部', actualAmount: 100, plannedAmount: 130, date: '2025-03-01' },
    { id: 10011, name: '手機', department: '銷售2部', actualAmount: 146, plannedAmount: 150, date: '2025-03-01' },
    { id: 10012, name: '鍵盤', department: '銷售4部', actualAmount: 130, plannedAmount: 130, date: '2025-10-01' },
    { id: 10013, name: '手機', department: '銷售2部', actualAmount: 140, plannedAmount: 80, date: '2025-02-01' },
    { id: 10014, name: '筆記本', department: '銷售1部', actualAmount: 200, plannedAmount: 100, date: '2025-08-01' },
    { id: 10015, name: '鍵盤', department: '銷售3部', actualAmount: 320, plannedAmount: 300, date: '2025-05-01' },
    { id: 10016, name: '筆記本', department: '銷售4部', actualAmount: 380, plannedAmount: 400, date: '2025-10-01' },
    { id: 10017, name: '鼠標(biāo)', department: '銷售1部', actualAmount: 34, plannedAmount: 200, date: '2025-12-01' },
    { id: 10018, name: '鍵盤', department: '銷售4部', actualAmount: 100, plannedAmount: 150, date: '2025-10-01' },
    { id: 10019, name: '鼠標(biāo)', department: '銷售3部', actualAmount: 90, plannedAmount: 120, date: '2025-02-01' },
    { id: 10020, name: '手機', department: '銷售2部', actualAmount: 40, plannedAmount: 50, date: '2025-03-01' }
  ]
})
</script>

https://gitee.com/x-extends/vxe-table

posted @ 2025-08-04 11:32 可不簡單閱讀(593) 評論(0) 收藏舉報

刷新頁面返回頂部

qaz666