vue 開發table 列表時，需要動態調整列字段的順序和顯示隱藏
實現效果如圖所示：
vue 組件代碼
<template><div style="width: 90%; margin: 0 auto;"><el-table :data="tableData" border="" ref="tableNode" @selection-change="handleSelectionChange" :height="windowHeight - 200" v-loading="loading" row-key="field"><el-table-column type="selection" width="70"></el-table-column><el-table-column prop="fieldName" label="列名"></el-table-column><el-table-column prop="sortNum" label="排序"><template slot-scope="scope">{{ scope.$index + 1 }}</template></el-table-column></el-table><div style="display: flex; justify-content: flex-end; padding-top: 20px;"><el-button @click="reset" size="mini">取消</el-button><el-button type="primary" @click="submit" size="mini">保存</el-button></div></div>
</template><script>
import { setPageFieldSort, getPageFieldSort } from "@/api/public";
import Sortable from "sortablejs";export default {name: 'listFieldSet',data() {return {pageName: "",tableData: [],multipleSelection: [],selectedRowsBackup: [],loading: false,windowHeight: window.innerHeight,}},updated() {this.$nextTick(() => {this.$refs.tableNode.doLayout()})},mounted() {window.addEventListener('resize', this.handleResize);},beforeDestroy() {window.removeEventListener('resize', this.handleResize);},methods: {handleResize() {this.windowHeight = window.innerHeight;},initData(pageName) {this.pageName = pageName;if (this.tableData && this.tableData.length === 0) {this.loading = true;getPageFieldSort({'pageName': pageName}).then(res => {this.tableData = res.data;if (this.tableData) {this.tableData.forEach(item => {if (item.isShow) {this.multipleSelection.push(item.field);this.$nextTick(() => {this.$refs.tableNode.toggleRowSelection(item, true);});}});}}).finally(() => {this.loading = false;});//聲明表格拖動排序方法this.pullSort();}},// //表格拖動排序方法pullSort() {// 通過ref獲取Dom節點const el = this.$refs.tableNode.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];this.sortable = Sortable.create(el, {animation: 200, //拖拽動畫(毫秒)setData: function (dataTransfer) {dataTransfer.setData("Text", "");},onStart: () => {// 拖拽開始前保存當前選中的行this.selectedRowsBackup = [...this.multipleSelection];},// 結束拖拽onEnd: (evt) => {const movedItem = this.tableData.splice(evt.oldIndex, 1)[0];this.tableData.splice(evt.newIndex, 0, movedItem);this.$nextTick(() => {this.selectedRowsBackup.forEach(row => {const targetRow = this.tableData.find(item => item.field === row);if (targetRow) {this.$refs.tableNode.toggleRowSelection(targetRow, true); // 重新選中}});})},});},handleSelectionChange(rows) {this.multipleSelection = rows.map(row => row.field);},reset() {this.$emit('close');},submit() {this.loading = true;this.tableData.forEach(item => {item.isShow = this.multipleSelection.findIndex(row => row === item.field) > -1;});setPageFieldSort({'fields': this.tableData,'pageName': this.pageName}).then(res => {this.$message.success("保存成功");}).finally(() => {this.loading = false;});},}
}
</script>
列表字段實例數據
[{"id": 449,"userCode": "klfadmin","field": "id","pageName": "projectLaborManagement","sortNum": 1,"isShow": 1,"fieldName": "序號"},{"id": 450,"userCode": "klfadmin","field": "title","pageName": "projectLaborManagement","sortNum": 2,"isShow": 1,"fieldName": "勞務標題"},{"id": 451,"userCode": "klfadmin","field": "state","pageName": "projectLaborManagement","sortNum": 3,"isShow": 1,"fieldName": "狀態"}
]
代碼說明
-
template普通的表格列表展示，主要展示所有的可設置的字段@selection-change勾選時觸發事件，存儲一下勾選項，記錄的是每行的field字段:height是設置容器的高度，此處是自動適應窗口高度。實現邏輯可參考 前面的文章
-
initData方法，加載列表字段，見上的實例數據，此處是接口加載。請求的數據是 第4步存儲的數據。this.$refs.tableNode.toggleRowSelection(item, true);接口請求到數據后，遍歷數組，觸發勾選項默認勾選- 注意點：
- 數據未完全渲染到表格前，嘗試操作選中狀態，
toggleRowSelection是失效的。 - 使用
$nextTick確保 DOM 更新后再操作選中，此處我就踩坑了，沒有用$nextTick，導致一直失效，好久才反應過來。
- 數據未完全渲染到表格前，嘗試操作選中狀態，
-
pullSort觸發表格拖動排序方法setData解決 Firefox 瀏覽器拖拽時的兼容性問題，避免出現禁止拖拽的圖標。onStart拖拽開始前，將選中的數據備份一下。踩坑，因為拖拽過程中重新渲染了表格數據，導致選中狀態丟失，大家可測試打印一下，看看是否丟失。onEnd拖拽結束時的回調函數-
evt.oldIndex 和 evt.newIndexSortable.js提供的拖拽事件參數，表示拖拽前后的位置索引。
-
數組元素移動邏輯
splice(evt.oldIndex, 1)[0]：從原位置刪除元素并返回該元素。splice(evt.newIndex, 0, movedItem)：將元素插入新位置。
-
this.$nextTick- 確保 DOM 更新完成后再操作選中狀態，避免因異步渲染導致的行選中失效。
-
恢復選中狀態的邏輯
-
selectedRowsBackup：拖拽前備份的選中行字段（如 [‘field1’, ‘field2’]）。 -
this.tableData.find(item => item.field === row)：根據field找到拖拽后的行對象。 -
toggleRowSelection(targetRow, true)：手動設置行選中（需配合 表格 ref）。
-
-
-
submit提交保存，將排序后的數組保存下來，并且同時保存一下選中狀態。
Sortable.js 完整流程圖
開始拖拽→ 備份選中行 (onStart)→ 移動數據 (onEnd)→ 等待DOM更新 ($nextTick)→ 遍歷備份的選中字段→ 找到新位置的行對象→ 重新選中 (toggleRowSelection)
結束
父組件使用方式
Drawer 抽屜組件 加載子組件設置
<el-drawer title="列表設置" :visible.sync="listFieldSet.dialogVisible" size="20%" direction="rtl"><listFieldSet ref="listFieldSetRef" @close="listFieldSet.dialogVisible = false"></listFieldSet></el-drawer>
父組件使用
<template><el-table :data="tableData" v-loading="loading" border style="width: 100%" ref="table"><template v-for="(item, index) in listFieldData"><el-table-column v-if="item.isShow" :key="index" :prop="item.field" :label="item.fieldName" width="120"><template slot-scope="scope"><span v-if="item.field === 'proName'">{{ scope.row.project ? scope.row.project.proName : '' }}</span><span v-else>{{ scope.row[item.field] || '' }}</span></template></el-table-column></template><el-table-column label="操作" fixed="right"></el-table-column></el-table>
</template>
使用的場景和方式非常多，上面我是用遍歷+判斷，正常渲染排序后的列表字段。大家理解后可以靈活應對類似需求
