使用vue.js做企业网站,淮南服装网站建设费用,黄页app,陕西省建设厅的网站文章目录 一、项目初始化1.1 技术栈说明1.2 项目结构图#xff08;Mermaid#xff09; 二、构建基础表格组件2.1 创建基本表格结构 三、实现行拖拽排序3.1 安装依赖3.2 使用 vuedraggable 实现拖拽 四、实现列宽拖拽调整4.1 基本样式设置4.2 添加拖拽逻辑 五、实现列拖拽排序… 文章目录 一、项目初始化1.1 技术栈说明1.2 项目结构图Mermaid 二、构建基础表格组件2.1 创建基本表格结构 三、实现行拖拽排序3.1 安装依赖3.2 使用 vuedraggable 实现拖拽 四、实现列宽拖拽调整4.1 基本样式设置4.2 添加拖拽逻辑 五、实现列拖拽排序5.1 转换列为可拖拽结构5.2 保证数据对应正确列 六、可拓展功能实现6.1 固定列实现示意6.2 列顺序保存到本地存储 七、总结 一、项目初始化
1.1 技术栈说明
Vue 3 Composition APIvuedraggable用于实现拖拽排序原生 DOM 操作用于列宽调整Element Plus可选用于样式和表格基础结构
1.2 项目结构图Mermaid #mermaid-svg-EWytQnjQ6WPZOCda {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-EWytQnjQ6WPZOCda .error-icon{fill:#552222;}#mermaid-svg-EWytQnjQ6WPZOCda .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-EWytQnjQ6WPZOCda .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-EWytQnjQ6WPZOCda .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-EWytQnjQ6WPZOCda .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-EWytQnjQ6WPZOCda .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-EWytQnjQ6WPZOCda .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-EWytQnjQ6WPZOCda .marker{fill:#333333;stroke:#333333;}#mermaid-svg-EWytQnjQ6WPZOCda .marker.cross{stroke:#333333;}#mermaid-svg-EWytQnjQ6WPZOCda svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-EWytQnjQ6WPZOCda .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-EWytQnjQ6WPZOCda .cluster-label text{fill:#333;}#mermaid-svg-EWytQnjQ6WPZOCda .cluster-label span{color:#333;}#mermaid-svg-EWytQnjQ6WPZOCda .label text,#mermaid-svg-EWytQnjQ6WPZOCda span{fill:#333;color:#333;}#mermaid-svg-EWytQnjQ6WPZOCda .node rect,#mermaid-svg-EWytQnjQ6WPZOCda .node circle,#mermaid-svg-EWytQnjQ6WPZOCda .node ellipse,#mermaid-svg-EWytQnjQ6WPZOCda .node polygon,#mermaid-svg-EWytQnjQ6WPZOCda .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-EWytQnjQ6WPZOCda .node .label{text-align:center;}#mermaid-svg-EWytQnjQ6WPZOCda .node.clickable{cursor:pointer;}#mermaid-svg-EWytQnjQ6WPZOCda .arrowheadPath{fill:#333333;}#mermaid-svg-EWytQnjQ6WPZOCda .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-EWytQnjQ6WPZOCda .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-EWytQnjQ6WPZOCda .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-EWytQnjQ6WPZOCda .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-EWytQnjQ6WPZOCda .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-EWytQnjQ6WPZOCda .cluster text{fill:#333;}#mermaid-svg-EWytQnjQ6WPZOCda .cluster span{color:#333;}#mermaid-svg-EWytQnjQ6WPZOCda div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-EWytQnjQ6WPZOCda :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} App.vue TableComponent.vue RowDraggable.vue ColResizable.vue 二、构建基础表格组件
2.1 创建基本表格结构
!-- TableComponent.vue --
templatediv classtable-containertabletheadtrth v-for(col, index) in columns :keycol.key{{ col.label }}/th/tr/theadtbodytr v-for(row, rowIndex) in tableData :keyrow.idtd v-forcol in columns :keycol.key{{ row[col.key] }}/td/tr/tbody/table/div
/templatescript setup
import { ref } from vueconst columns ref([{ label: 姓名, key: name },{ label: 年龄, key: age },{ label: 地址, key: address }
])const tableData ref([{ id: 1, name: 小明, age: 25, address: 北京 },{ id: 2, name: 小红, age: 30, address: 上海 },{ id: 3, name: 小刚, age: 28, address: 广州 }
])
/script三、实现行拖拽排序
3.1 安装依赖
npm install vuedraggable3.2 使用 vuedraggable 实现拖拽
templatedraggable v-modeltableData tagtbody item-keyidtr v-forrow in tableData :keyrow.idtd v-forcol in columns :keycol.key{{ row[col.key] }}/td/tr/draggable
/templatescript setup
import draggable from vuedraggable
/script四、实现列宽拖拽调整
4.1 基本样式设置
th {position: relative;padding-right: 8px;
}.resizer {position: absolute;top: 0;right: 0;width: 5px;cursor: col-resize;user-select: none;
}4.2 添加拖拽逻辑
thv-for(col, index) in columns:keycol.key:style{ width: col.width px }mousedownstartResize($event, index)
{{ col.label }}span classresizer/span
/thlet startX, startWidthconst startResize (e, index) {startX e.clientXstartWidth columns.value[index].width || 100document.addEventListener(mousemove, resize)document.addEventListener(mouseup, stopResize)function resize(e) {const newWidth startWidth (e.clientX - startX)columns.value[index].width Math.max(newWidth, 60)}function stopResize() {document.removeEventListener(mousemove, resize)document.removeEventListener(mouseup, stopResize)}
}五、实现列拖拽排序
5.1 转换列为可拖拽结构
draggable v-modelcolumns tagtr item-keykey directionhorizontalthv-for(col, index) in columns:keycol.key:style{ width: col.width px }mousedownstartResize($event, index){{ col.label }}span classresizer/span/th
/draggable5.2 保证数据对应正确列
tr v-forrow in tableData :keyrow.idtd v-forcol in columns :keycol.key{{ row[col.key] }}/td
/tr六、可拓展功能实现
6.1 固定列实现示意
th :class{ sticky-left: index 0 } ... /th.sticky-left {position: sticky;left: 0;background-color: #fff;z-index: 2;
}6.2 列顺序保存到本地存储
watch(columns, (val) {localStorage.setItem(columns, JSON.stringify(val))
}, { deep: true })onMounted(() {const saved localStorage.getItem(columns)if (saved) {columns.value JSON.parse(saved)}
})七、总结
通过本文我们使用 Vue 3 实现了一个具备以下功能的可配置表格组件
✅ 行拖拽排序✅ 列宽度调整✅ 列顺序拖拽✅ 固定列支持✅ 用户列设置持久化
该组件可广泛应用于数据管理后台、内容管理系统等场景未来可继续拓展如列隐藏、分组列头、自定义渲染等功能。 到这里这篇文章就和大家说再见啦我的主页里还藏着很多 篇 前端 实战干货感兴趣的话可以点击头像看看说不定能找到你需要的解决方案 创作这篇内容花了很多的功夫。如果它帮你解决了问题或者带来了启发欢迎 点个赞❤️ 让更多人看到优质内容 关注「前端极客探险家」 每周解锁新技巧 收藏文章⭐️ 方便随时查阅 特别提醒 转载请注明原文链接商业合作请私信联系 感谢你的阅读我们下篇文章再见
