avue-crud屬性配置項參數筆記分享

来源:https://www.cnblogs.com/jinhaisheng/archive/2023/08/09/17611819.html
-Advertisement-
Play Games

Avue 是一個基於Element-plus低代碼前端框架，它使用JSON 配置來生成頁面，可以減少頁面開發工作量，極大提升效率； 雖然Avue官網上面都有這些配置說明，但是如果剛開始接觸不熟悉框架的話需要很久才找到自己需要的參數配置，為了方便自己今後查找使用，現將一些開發中常用的配置梳理在下 一、 ...


 

Avue 是一個基於Element-plus低代碼前端框架，它使用JSON 配置來生成頁面，可以減少頁面開發工作量，極大提升效率；

雖然Avue官網上面都有這些配置說明，但是如果剛開始接觸不熟悉框架的話需要很久才找到自己需要的參數配置，為了方便自己今後查找使用，現將一些開發中常用的配置梳理在下

 

一、avue-crud 配置項個參數簡介

 

二、crud之option解釋

 

 

三、crud之column解釋

 

四、crud之group解釋

group: [
　　{
　　　　label: '基本信息',
　　　　prop: 'jbxx',
　　　　icon: 'el-icon-edit-outline',
　　　　display: true,
　　　　column: [
　　　　　　{
　　　　　　　　label: "主體類型",
　　　　　　　　prop: "relType1",
　　　　　　　　search: false,
　　　　　　　　span: 8,
　　　　　　　　editDisabled: true,
　　　　　　},
　　　　　　{
　　　　　　　　label: "主體名稱",
　　　　　　　　prop: "name",
　　　　　　　　span: 8,
　　　　　　　　search: false,
　　　　　　　　editDisabled: true,
　　　　　　}
　　　　]
　　},
　　{
　　　　label: '申請信息',
　　　　prop: 'jbxx',
　　　　span: 8,
　　　　icon: 'el-icon-edit-outline',
　　　　arrow: true,
　　　　column: [
　　　　　　{
　　　　　　　　label: "申請類型",
　　　　　　　　prop: "breedType1",
　　　　　　　　span: 8,
　　　　　　　　hide: true,
　　　　　　　　editDisabled: true,
　　　　　　}
　　　　]
　　},
]

五、column類型寫法（input框、時間選擇器、上傳圖片等）

　　1.基礎輸入框

　　　　{
　　　　　　label: "廣告標題",
　　　　　　prop: "title",
　　　　　　rules: [{
　　　　　　　　required: true,
　　　　　　　　message: "請輸入廣告標題",
　　　　　　　　trigger: "blur"
　　　　　　}],
　　　　},

　　2.下拉選擇框

　　　　{
　　　　　　label: "設備負責人",
　　　　　　prop: "deviceUserId",
　　　　　　type: "select", //類型為下拉選擇框
　　　　　　dicUrl: "/api/blade-system/dict/dictionary?code=supplierLvl",   //獲取數據介面地址
　　　　　　props: {
　　　　　　　　label: "dictValue",
　　　　　　　　value: "dictKey"
　　　　　　},
　　　　　　searchClearable:false,                                                             //可清空的輸入框,預設為true
　　　　　　dataType: "number",                                                                //數據類型用於數組和字元串之間的轉化,預設string
　　　　　　filterable: true,                                                                          //添加filterable屬性即可啟用搜索功能
　　　　　　rules: [{
　　　　　　　　required: true,
　　　　　　　　message: "請輸入設備負責人",
　　　　　　　　trigger: "blur"
　　　　　　}],
　　　　},

　　3.時間控制項框

　　　　年份類型：
　　　　　　{
　　　　　　　　label: "年份",
　　　　　　　　prop: "yearTime",
　　　　　　　　rules: [{
　　　　　　　　　　required: true,
　　　　　　　　　　message: "請輸入年份",
　　　　　　　　　　trigger: "blur"
　　　　　　　　}],
　　　　　　　　type: "year",                                                                    //類型為年份
　　　　　　　　format: "yyyy",
　　　　　　　　valueFormat: "yyyy",
　　　　　　　　//限制能選擇的時間範圍
　　　　　　　　pickerOptions: {
　　　　　　　　　　// 禁用年份日期通過 disabledDate 設置
　　　　　　　　　　disabledDate(time) {
　　　　　　　　　　　　return time.getTime() < Date.now();
　　　　　　　　　　},
　　　　　　　　}
　　　　　　},
　　　　普通日期類型：
　　　　　　{
　　　　　　　　label: "開始時間",
　　　　　　　　prop: "startTime",
　　　　　　　　type: "date",                                                               //類型為日期
　　　　　　　　format: "yyyy-MM-dd",
　　　　　　　　valueFormat: "yyyy-MM-dd",
　　　　　　　　rules: [{
　　　　　　　　　　required: true,
　　　　　　　　　　message: "請選擇開始日期",
　　　　　　　　　　trigger: "blur"
　　　　　　　　}],
　　　　　　},


　　　　普通日期+時間類型：
　　　　　　{
　　　　　　　　label: "開始時間",
　　　　　　　　prop: "startTime",
　　　　　　　　type: "datetime",                                                      //類型為日期+時間
　　　　　　　　format: "yyyy-MM-dd HH:mm:ss",
　　　　　　　　valueFormat: "yyyy-MM-dd HH:mm:ss",
　　　　　　　　rules: [{
　　　　　　　　　　required: true,
　　　　　　　　　　message: "請選擇開始時間",
　　　　　　　　　　trigger: "blur"
　　　　　　　　}],
　　　　　　},

　　　　時間範圍類型：
　　　　　　{
　　　　　　　　label: "時間範圍",
　　　　　　　　prop: "Time",
　　　　　　　　type: "datetimerange",
　　　　　　　　searchRange: true,                                                     //開啟範圍搜索
　　　　　　　　format: "yyyy-MM-dd HH:mm:ss",
　　　　　　　　valueFormat: "yyyy-MM-dd HH:mm:ss",
　　　　　　　　rules: [{
　　　　　　　　　　required: true,
　　　　　　　　　　　message: "請選擇時間範圍",
　　　　　　　　　　trigger: "blur"
　　　　　　　　}],
　　　　　　},

　　4.計數選擇器

　　　　{
　　　　　　label: "權重",
　　　　　　prop: "sort",
　　　　　　type: 'number',                                                                //類型為數字
　　　　　　minRows: 0,                                                                    //最小數字為0
　　　　　　tip: '只能填寫數字，數字越大廣告排序越前',                  //提示語
　　　　　　rules: [{
　　　　　　　　required: true,
　　　　　　　　message: "請選擇權重",
　　　　　　　　trigger: "blur"
　　　　　　}],
　　　　},

　　5.單選框

　　　　{
　　　　　　label: "是否發佈",
　　　　　　prop: "isPublish",
　　　　　　type:'radio', //類型為單選框
　　　　　　dicData: [
　　　　　　　　{
　　　　　　　　　　label: "發佈",
　　　　　　　　　　value: 1
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　　label: "停用",
　　　　　　　　　　value: 0
　　　　　　　　},
　　　　　　],
　　　　　　rules: [{
　　　　　　　　required: true,
　　　　　　　　message: "請選擇是否發佈",
　　　　　　　　trigger: "blur"
　　　　　　}],
　　　　},

　　6.上傳圖片框

　　　　{
　　　　　　label: "圖片地址",
　　　　　　prop: "photo",
　　　　　　type:'upload',
　　　　　　drag: true, //拖拽上傳類型
　　　　　　action: '/api/blade-resource/file/upload',                 //上傳路徑
　　　　　　//返回數據結構體配置
　　　　　　propsHttp: {
　　　　　　　　res: 'data',                                                        //返回結構體的層次
　　　　　　　　url:'url',                                                             //上傳成功返回結構體的圖片地址
　　　　　　　　home:'http://tzhb.zhisuaninfo.com/pic/'            //圖片的根路徑地址
　　　　　　},
　　　　　　dataType: 'string',                                                     //正常是數組格式，添加這個屬性就變成了string格式傳給介面
　　　　　　data: { dir: 'paymentList'} ,                                        //指定上傳參數
　　　　　　imgWidth:100,                                                          //圖片寬度
　　　　　　imgHeight:100,                                                         //圖片高度
　　　　　　listType:'picture-img',                                                //圖片列表類型
　　　　　　rules: [{
　　　　　　　　required: true,
　　　　　　　　message: "請上傳圖片",
　　　　　　　　trigger: "blur"
　　　　　　}],
　　　　},

　　7.多行文本域框

　　　　{
　　　　　　label: "供應項目",
　　　　　　prop: "projects",
　　　　　　minRows: 5, 　　　　　　 //最小行/最小值
　　　　　　type: "textarea", 　　　　  //類型為多行文本域框
　　　　　　maxlength:500, 　　　　   //最大輸入長度
　　　　},

　　8.級聯選擇器

　　　　{
　　　　　　label: "歸屬系統",
　　　　　　prop: "systemId",
　　　　　　rules: [{
　　　　　　　　required: true,
　　　　　　　　message: "請輸入歸屬系統",
　　　　　　　　trigger: "blur"
　　　　　　}],
　　　　　　dicUrl: "/api/blade-property/devicesystemtype/allSystemTypeTree",　　　　//字典遠程字典(填介面路徑)
　　　　　　type: 'cascader', 　　　　　　　　　　　　　　　　　　　　　　　　　　//類型為：級聯選擇器
　　　　　　props: {
　　　　　　　　label: "name", 　　　　　　　　　　　　　　　　　　　　　　　　　 //遠程字典介面對應顯示欄位
　　　　　　　　value: "id" 　　　　　　　　　　　　　　　　　　　　　　　　　　    //遠程字典介面對應傳值欄位
　　　　　　},
　　　　　　filterable: true, 　　　　　　　　　　　　　　　　　　　　　　　　　　　  //添加filterable屬性即可啟用搜索功能
　　　　　　checkStrictly: true,　　　　　　　　　　　　　　　　　　　　　　　　　　 //可以選擇任意一級
　　　　　　searchCheckStrictly:true, 　　　　　　　　　　　　　　　　　　　　　　    //可以選擇任意一級(在搜索框中起作用)
　　　　　　search:true,
　　　　},

　　9.子表單

　　　　{
　　　　　　label: "子表單內容",
　　　　　　prop: "RoomTollInfo",
　　　　　　type: "dynamic", 　　　　　　　　　　　　　　 //類型為子表單(可新增刪除)
　　　　　　span: 24,
　　　　　　labelPosition:'top', 　　　　　　　　　　　　　 //子表單標題
　　　　　　children: {
　　　　　　　　align: "center",
　　　　　　　　column: [
　　　　　　　　　　{
　　　　　　　　　　　　label: "價格",
　　　　　　　　　　　　prop: "price",
　　　　　　　　　　},{
　　　　　　　　　　　　label: "合同編號",
　　　　　　　　　　　　prop: "contractNum",
　　　　　　　　　　　　hide:true
　　　　　　　　}]
　　　　　　}
　　　　},

　　10.顏色控制項

　　　　{
　　　　　　label: "主題顏色",
　　　　　　prop: "color",
　　　　　　type: 'color',
　　　　　　value:"", 　　　　　　　　　　  //預設值
　　　　　　disabled:true,　　　　　　　　 //是否禁用
　　　　　　colorFormat:"hex",　　 　　      //顏色格式
　　　　　　showAlpha:false,　　　　　　  //顏色格式
　　　　　　predefine: [
　　　　　　　　'#ff4500',
　　　　　　　　'#ff8c00',
　　　　　　　　'#ffd700'
　　　　　　],　　　　　　　　　　　　　 //預定義顏色
　　　　},

　　11.數組

　　　　{
　　　　　　label:'數組',
　　　　　　prop:'array',
　　　　　　dataType:'number',
　　　　　　propsHttp:{
　　　　　　　　home:'http://demo.cssmoban.com',
　　　　　　},
　　　　　　type:'array'
　　　　}

　　12.超鏈接

　　　　{
　　　　　　label:'超鏈接',
　　　　　　prop:'href',
　　　　　　type:'url'
　　　　},

　　13.引入三方組件-富文本編輯器

　　　　main.js註冊全局引入：
　　　　import avueUeditor from 'avue-plugin-ueditor';
　　　　Vue.component('avueUeditor', avueUeditor);

　　　　{
　　　　　　label:'機構介紹',
　　　　　　prop: "institutionIntroduce",
　　　　　　component: 'AvueUeditor',
　　　　　　options: {
　　　　　　　　action: '/api/blade-resource/oss/endpoint/put-file',
　　　　　　　　props: {
　　　　　　　　　　　　res: "data",
　　　　　　　　　　　　url: "link",
　　　　　　　　}
　　　　　　},
　　　　},

 

接下來還會分享使用avue框架開發項目中所遇到的各式各樣問題，可供各位crl+cv

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL 優化—— SQL 性能分析
    # SQL 性能分析 ## SQL 執行頻率 MySQL 客戶端連接成功後，通過 `show [session | global] status` 命令可以提供服務其狀態信息。通過下麵指令，可以查看當前資料庫 CRUD 的訪問頻次： `SHOW GLOBAL STATUS LIKE 'Com____ ...
  • 袋鼠雲數棧 DataOps 數據生產力實踐，實現數據流程的自動化和規範化
    [袋鼠雲產品團隊](https://www.dtstack.com/dtinsight?src=szsm)在幫助企業進行數字化轉型實踐的過程中，發現很多企業在[數據生產鏈路](https://www.dtstack.com/dtinsight?src=szsm)上都有著相同的問題。包括數據團隊聚焦於 ...
  • 這麼分頁，小心有坑
    ## 背景 生產上有個導報表功能，工作了很長一段時間一直都很穩，沒出現過什麼問題，最近運營同學突然反饋導出來的數據和實際的對不上，經過排查發現導出的數據有重覆，也有的沒導出來。 由於我們提前生成好數據（每天會truncate重新生成），所以導出的邏輯非常簡單，不需要關聯很多表撈數據，只需要從一張表查 ...
  • GreatSQL從單機到MGR擴展紀實
    # 一、前言 原有的業務系統跑在MySQL主從架構中，高可用通過腳本完成，但存在切換數據丟失和切換不及時風險，調研了高可用更穩定的MGR後，準備入手一試。本篇文章主要記錄GreatSQL從單機擴展到MGR的詳細過程，遇到的問題及解決方法。 # 二、基礎環境 伺服器角色如下 | IP | 埠 | 主 ...
  • 選讀SQL經典實例筆記20_Oracle語法示例
    ![](https://img2023.cnblogs.com/blog/3076680/202308/3076680-20230807132720267-1631745639.png) # 1. 計算一年有多少天 ## 1.1. Oracle sql語句實例 ```sql select 'Days ...
  • Android Webview 調試總結
    一、升級webview版本 (1). 下載需要更新的Webview apk。如果不能翻牆可以用下載好的版本（相容32/64位）：Webview-115.0.5790.138 (2). 在路徑\aosp\external\chromium-webview\prebuilt\下替換arm或arm64架構 ...
  • Android13凍結進程分析：如何提高設備性能和用戶體驗
    本文介紹了Android13中的凍結進程功能，它是一種重要的資源管理策略，可以提高系統性能和穩定性，同時最大限度地節省設備的資源和電池消耗。 文章討論瞭如何合理分配資源，包括CPU、記憶體等，以提高設備性能和用戶體驗。此外，文章還提到了凍結進程對應用程式線程的影響，並介紹了Android13與Andr... ...
  • 記錄--使用 JS 實現基本的截圖功能
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 思路分析 在開始動手之前，分析一下整個功能的實現過程： 根據圖片大小創建 canvas1 畫布，並將原圖片直接定位在 canvas1 上； 在畫布上添加一個蒙層，以區分當前 canvas 圖像是被裁剪的原圖像； 在蒙層上方，對裁剪區域（鼠 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類