可不簡單 -
vxe-table 複製單元格內容總會在最後加個換行符,如何去掉末尾換行符的解決方法
vxe-table 複製單元格內容總會在最後加個換行符,如何去掉末尾換行符的解決方法,默認情況下複製單元格內容時,會自動在文本尾部帶個換行符。
https://vxetable.cn
通過 clip-config.isTrimCopyContent 來啓用對複製後內容的修剪功能,自動去掉本次內容的換行符
template
div
vxe-switch v-model="clipCon
前端
可不簡單 -
vxe-table 個性化列自定義列彈出層修改高度、修改最大高度不自動適應表格高度的方法
vxe-table 個性化列自定義列彈出層修改高度、修改最大高度不自動適應表格高度的方法
默認情況下,在表格設置高度或最小高度的情況下個性化列彈出層默認內部模式(自適應表格高度),表格多高就最大多高;未設置高度情況下默認外部模式(不跟隨表格高度)
https://vxetable.cn
自適應高度時
當 custom-config.poupuOptions.mode='auto' 時,且同時設置高
前端
可不簡單 -
vue 表格 vxe-table 加載數據的幾種方式,更新數據的用法
vue 表格 vxe-table 加載數據的幾種方式,更新數據的用法,vue 最強大的表格組件,支持 vue2 和 vue3,功能太多,這裏介紹基礎用法
https://vxetable.cn
雙向綁定 data 方式
數據是雙向同步的,修改 data 就可以自動刷新
template
div
vxe-button status="primary" @click="loadList1
前端
可不簡單 -
vue vxe-context-menu 如何給任意組件使用右鍵菜單,全局右鍵菜單
vue vxe-context-menu 如何給任意組件使用右鍵菜單,全局右鍵菜單,支持任意組件中直接調用右鍵菜單
打開右鍵菜單:VxeUI.contextMenu.open({ options })
事件觸發右鍵菜單:VxeUI.contextMenu.openByEvent(event, { options })
關閉右鍵菜單:VxeUI.contextMenu.close()
h
前端
可不簡單 -
vxe-table 如何實現對單元格數據校驗不通過的單元格顯示背景顏色
vxe-table 如何實現對單元格數據校驗不通過的單元格顯示背景顏色,通過設置 valid-config.theme='beautify' 設置為高亮樣式,調用 fullValidate 方法可以同時顯示多個錯誤提示。
https://vxetable.cn
通過設置 valid-config.showErrorBackground 顯示校驗錯誤單元格背景色
template
div
前端
可不簡單 -
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
前端