可不簡單 -
vxe-table 如何實現分頁勾選複選框功能,分頁後還能支持多選的選中狀態
vxe-table 如何實現分頁勾選複選框功能,分頁後還能支持多選的選中狀態,要實現這個功能,有多種方式
https://vxetable.cn
可以使用一個變量來記錄已選的數據,在分頁時重新賦值選中狀態。
使用內置的選中狀態記憶保留功能,可以直接使用,無需再額外寫代碼
分頁多選保留狀態
當使用數據分頁與複選框多頁選中時,可以通過 checkbox-config.reserve 啓用,將不
前端
可不簡單 -
vxe-table 修改表格樣式,修改邊字體、框、背景色等樣式的用法
vxe-table 修改表格樣式,修改邊字體、框、背景色等樣式的用法,支持 css 變量和 scss 主題變量,可以非常方便的對樣式進行全局修改和局部修改。
https://vxetable.cn
修改字體大小
css 變量 如下:
--vxe-ui-font-size-default: 18px;
--vxe-ui-font-size-medium: 16px;
--vxe-u
前端
可不簡單 -
vue 表格 vxe-table 開啓篩選、excel 篩選框列表樣式
vue 表格 vxe-table 開啓篩選、excel 篩選框列表樣式,通過設置列的 filterRender.name = 'FilterAggregation'啓用組合篩選功能
https://vxetable.cn
template
div
vxe-grid v-bind="gridOptions"/vxe-grid
/div
/template
script setup
前端
可不簡單 -
vue 表格 vxe-table 樹結構實現單元格複製粘貼功能,實現樹層級節點複製功能
vue 表格 vxe-table 樹結構實現單元格複製粘貼功能,實現樹層級節點複製功能;樹結構默認是平級粘貼,可以通過 clip-config.isDeepPaste 啓用深層數據結構的粘貼,需要注意樹結構只支持 tree-config.transform 模式
https://vxetable.cn
可以通過 clip-config.isDeepPaste 啓用深層數據結構的粘貼
templa
前端
可不簡單 -
vxe-table 如何實現複選框範圍選取,鼠標滑動選擇行效果不
vxe-table 如何實現複選框範圍選取,鼠標滑動選擇行效果不,按住複選框的列,向上或向下滑動選取, 鼠標按 MouseLeft + Ctrl 局部選取/取消選擇
https://vxetable.cn
template
div
vxe-grid v-bind="gridOptions"/vxe-grid
/div
/template
script setup
import
前端
可不簡單 -
vue 甘特圖 vxe-gantt 任務里程碑和依賴線的使用
vue 甘特圖 vxe-gantt 任務里程碑和依賴線的使用
https://gantt.vxeui.com/
通過設置 task-bar-milestone-config 和 type=moveable 啓用里程碑類型,當設置為里程碑類型時,只需要設置 start 開始日期就可以,無需設置 end 結束日期,設置 links 定義連接線,from 對應源任務的行主鍵,tom 對應目標任務的行主
前端
可不簡單 -
vue 甘特圖 vxe-gantt 任務里程碑類型的配置用法
vue 甘特圖 vxe-gantt 任務里程碑類型的配置用法
查看官網:https://gantt.vxeui.com/
gitbub:https://github.com/x-extends/vxe-gantt
gitee:https://gitee.com/x-extends/vxe-gantt
通過設置 task-bar-milestone-config 和 type=move
前端
可不簡單 -
vxe-table 導入 excel xlsx 時,單元格內容值丟失前面0解決方法
vxe-table 導入 excel xlsx 時,單元格內容值丟失前面0解決方法,不如到出數據為 "003200" ,導出到 xlsx 時,由於 xlsx 會自定義格式化數字,所以 0 就沒了;解決方法就是知道為字符串類型,可以通過 column.cell-type 設置
查看官網:https://vxetable.cn
gitbub:https://github.com/x-extend
前端
可不簡單 -
vue 甘特圖 vxe-gantt 手動增加一條依賴線,刪除連接線的用法
vue 甘特圖 vxe-gantt 手動增加一條依賴線,刪除連接線的用法,通過設置 links 定義連接線,from 對應源任務的行主鍵,tom 對應目標任務的行主鍵
0 FinishToStart 結束後才開始,表示一個任務必須在另一個任務開始之前完成
1 StartToFinish 開始到結束,表示從某個過程的開始到結束的整個過程
2 StartToStart 開始後才開始,表示一
Vue
,
前端
可不簡單 -
vue 甘特圖 vxe-gantt table 連接線的用法教程
vue 甘特圖 vxe-gantt table 連接線的用法教程,通過設置 links 定義連接線,from 對應源任務的行主鍵,tom 對應目標任務的行主鍵
https://gantt.vxeui.com
類型説明
0 FinishToStart 結束後才開始,表示一個任務必須在另一個任務開始之前完成
1 StartToFinish 開始到結束,表示從某個過程的開始到結束的整個過程
前端
可不簡單 -
vue 甘特圖 vxe-gantt table 依賴線的使用,配置連接線
vue 甘特圖 vxe-gantt table 依賴線的使用,配置連接線
連接線有幾種類型:
FinishToFinish:完成到完成,表示一個任務必須在另一個任務完成之後才能完成
StartToStart:開始後才開始,表示一個活動結束了,另一個活動才能開始,它們之間按先後順序進行
FinishToStart:結束後才開始,表示一個任務必須在另一個任務開始之前完成
前端
可不簡單 -
vue 甘特圖 vxe-gantt table 任務條可拖拽左右調整日期
vue 甘特圖 vxe-gantt table 任務條可拖拽左右調整日期
查看官網:https://gantt.vxeui.com/
gitbub:https://github.com/x-extends/vxe-gantt
gitee:https://gitee.com/x-extends/vxe-gantt
效果
代碼
通過設置 task-bar-config.resize 啓用
前端
可不簡單 -
如何實現 vxe-tree 樹組件拖拽節點後進行二次確認提示
如何實現 vxe-tree 樹組件拖拽節點後進行二次確認提示,參數 drag-config.dragStartMethod 可以自定義處理拖拽開始時的拖動,可以自定義是否允許拖拽
官網:https://vxeui.com
github:https://github.com/x-extends/vxe-pc-ui
gitee:https://gitee.com/x-extends/vxe
前端
可不簡單 -
vxe-tree 樹組件拖拽排序功能的使用教程
vxe-tree 樹組件拖拽排序功能的使用教程,通過 drag 啓用行拖拽排序功能,支持同層級、跨層級、拖拽到子級非常強大的拖拽功能等
官網:https://vxeui.com
github:https://github.com/x-extends/vxe-pc-ui
gitee:https://gitee.com/x-extends/vxe-pc-ui
同層級拖拽
通過 drag-c
前端
可不簡單 -
vxe-table 如何實現每一行的下拉框選項都是不一樣的
vxe-table 如何實現每一行的下拉框選項都是不一樣的
實現方式非常簡單,通過自定義插槽模板,給每一行的下拉框賦值不同的 options 就可以實現
查看官網:https://vxetable.cn
gitbub:https://github.com/x-extends/vxe-table
gitee:https://gitee.com/x-extends/vxe-table
前端
可不簡單 -
vue 常用的 gantt 甘特圖組件推薦
vue 常用的 gantt 甘特圖組件推薦,項目中使用過的甘特圖組件,各有優缺點。
dhtmlx-gantt 甘特圖
https://dhtmlx.com/docs/products/demoApps/
老牌的甘特圖組件,給你非常全面,使用難度高,可定製化功能比較一般,原生 js 和 vue 項目都能用,基礎版本免費,功能限制較多,企業版功能更強
任務列表
任務依賴關係
vxe-gantt
前端
可不簡單 -
vue vxe-gantt table 甘特圖實現任務可拖拽自動調整日期
vue vxe-gantt table 甘特圖實現任務可拖拽自動調整日期,通過設置 task-bar-config.drag 啓用任務條拖拽功能
效果
代碼
設置 task-bar-config.drag 啓用任務條拖拽功能
template
div
vxe-gantt v-bind="ganttOptions"/vxe-gantt
/div
/template
script
前端
可不簡單 -
vxe-gantt vue table 甘特圖子任務多層級自定義模板用法
vxe-gantt vue table 甘特圖子任務多層級自定義模板用法,通過樹結構來渲染多層級的子任務,將數據帶有父子層級的數組進行渲染
查看官網:https://gantt.vxeui.com/
gitbub:https://github.com/x-extends/vxe-gantt
gitee:https://gitee.com/x-extends/vxe-gantt
安裝
n
前端
可不簡單 -
vxe-gantt 甘特圖實現產品進度列表,自定義任務條樣式和提示信息
vxe-gantt 甘特圖實現產品進度列表,自定義任務條樣式和提示信息
查看官網:https://gantt.vxeui.com/
gitbub:https://github.com/x-extends/vxe-gantt
gitee:https://gitee.com/x-extends/vxe-gantt
安裝
npm install xe-utils@3.8.0 vxe-pc-u
前端
可不簡單 -
如何使用 vxe-table 導出為帶圖片的單元格到 excel 格式文件
如何使用 vxe-table 導出為帶圖片的單元格到 excel 格式文件
需要注意導出圖片時,需確保圖片是有效鏈接,且允許跨域獲取,否則不支持導出圖片
查看官網:https://vxetable.cn
gitbub:https://github.com/x-extends/vxe-table
gitee:https://gitee.com/x-extends/vxe-table
前端