vxe-table表格自定义拖拽,列宽,行编辑,行/列颜色设置。
1. 父组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | < el-main v-loading="loading"> < my-table :data="tyData" //表格数据 @selectionchange="selectionchange" //复选框多选 @getTableData="getdata" //获取列表数据 @showdialog="showdialog" //打开弹框 @editpro="editpro" //启动编辑 @selectAll="selectionAll" //全选 @handleRowClick="handleRowClick" //无复选框时单选 ref="districtTable" > //插槽 < template slot="operation" slot-scope="{row, $index}"> < p >编辑</ p > </ template > </ my-table > </ el-main > |
2. 子组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | < vxe-table border resizable show-overflow keep-source ref="table_tree" show-header-overflow :max-height="tableMaxHeight" :data="data.tableData" :edit-config="data.isedit ? {trigger: 'click', mode: 'cell', showIcon: false} : {showIcon: false}" :checkbox-config="{checkStrictly: checkStrictly, showHeader: true}" @edit-actived="editDisabledEvent" @checkbox-all="checkboxAll" @checkbox-change="handleSelectionChange" @radio-change="handleRowClick" :tree-config="data.isTree ? {transform: true, rowField: 'Keyoid', parentField: 'parentId', expandAll: true} : {}" @toggle-tree-expand="toggleExpandChangeEvent" :custom-config="{storage: true}" :column-config="{isCurrent: true, isHover: true, resizable: true}" :row-config="{isCurrent: true, isHover: true}" :column-key="true" id="fk_table" @resizable-change="resizableChange" class="mytable-scrollbar" @custom="toolbarCustomEvent" :scroll-y="{mode: 'wheel'}" :scroll-x="{gt: 10}" @current-change="handleRowClick" :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-style="rowStyle" > < vxe-column type="checkbox" width="60" v-if="data.selection" fixed="left"></ vxe-column > < vxe-column v-for="(col, index) in data.column" :key="index" :field="col.prop" :title="col.label" :align="col.align || 'center'" :width="col.width" :fixed="col.fixed ? 'left' : ''" :min-width="col.minWidth" :edit-render="{}" :show-header-overflow="col.showOverflowTooltip" :sortable="col.sortable ? col.sortable : false" :resizable="true" v-if="col.isShow" :tree-node="index === 0" > < template #default="{ row }"> < p class="p_word" v-html="showData(col.prop, row[col.prop], row)" @click="showdialog(row, col)" :class="{blue: col.type == 'dialog'}" ></ p > </ template > < template #edit="{ row }"> < slot v-if="col.slot" :name="col.prop" :row="row"></ slot > < div v-else> < el-input v-if="col.type == 'input'" v-model="row[col.prop]" @input=" val => { integerValue(row, col.prop, val); } " type="text" :disabled="col.disabled" style="width:100%;padding:2px" ></ el-input > </ div > </ template > </ vxe-column > < vxe-column title="操作" min-width="100" v-if="data.operation" fixed="right"> < template #default="{ row }"> < slot name="operation" :row="row"></ slot > </ template > </ vxe-column > </ vxe-table > |
子组件方法详解
vxe-table文档 :
1.列拖动
安装sortablejs,并在子组件引入
1 | import Sortable from 'sortablejs' |
实现
1 2 3 | mounted() { this.columnDrop1(); }, |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | //列拖动 columnDrop1() { this.$nextTick(() => { let xTable = this.$refs.table_tree; this.sortable = Sortable.create( xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'), { handle: '.vxe-header--column', onEnd: ({newIndex, oldIndex}) => { console.log(newIndex, oldIndex); let tableColumn = xTable.getColumns(); let currRow = tableColumn.splice(oldIndex, 1)[0]; tableColumn.splice(newIndex, 0, currRow); xTable.loadColumn(tableColumn); //此处可根据实际需求写 } } ); }); }, |
2.列宽改变
在vxe-table标签设置
1 2 3 | :custom-config="{storage: true}" :column-config="{isCurrent: true, isHover: true, resizable: true}" @resizable-change="resizableChange" |
方法调用
1 2 3 4 | //列宽改变 resizableChange({$rowIndex, column, columnIndex, $columnIndex, $event}) { console.log($rowIndex, column, columnIndex, $columnIndex, $event); }, |
3.样式设置.
https://xuliangzhan_admin.gitee.io/vxe-table/#/table/base/style 文档详细描述
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体