相關(guān)文章

• 

  Vue3 element-plus表單嵌套表格實(shí)現(xiàn)動(dòng)態(tài)表單驗(yàn)證

  部分效果圖如下： 另表格有添加和刪除按鈕，點(diǎn)擊提交進(jìn)行表單驗(yàn)證。 首先data格式必須是對(duì)象包裹數(shù)組 給表單綁定form數(shù)據(jù) 表格綁定tableData數(shù)據(jù) 給表單項(xiàng)增加驗(yàn)證規(guī)則 rules對(duì)應(yīng)data rules對(duì)象，prop對(duì)應(yīng)表單字段（注意是表格里每一行對(duì)應(yīng)的字段 forms.tableData[下標(biāo)].key） prop的關(guān)

  2024年02月14日

  瀏覽(25)

• vue 基于element-plus el-button封裝按鈕組件

  封裝組件的原則是：組件只是數(shù)據(jù)流通的一個(gè)管道，不要糅合太多的邏輯在里面，是一個(gè)純組件，還要根據(jù)自己項(xiàng)目的業(yè)務(wù)場(chǎng)景做具體的處理。

  2024年02月10日

  瀏覽(21)

• vue3 element-plus el-form的二次封裝

  form表單的二次封裝 vue3 element-plus el-form的二次封裝 屬性名 類型 默認(rèn)值 說明 data Array [] 頁(yè)面展示數(shù)據(jù)內(nèi)容 onChange Function false 表單事件 bindProps Object {} 表單屬性 formRef Object {} 表單ref ruleForm Object {} 數(shù)據(jù)

  2024年02月13日

  瀏覽(103)
• 

  vue3+element-plus表格默認(rèn)排序default-sort失效問題

  在使用動(dòng)態(tài)數(shù)據(jù)渲染的場(chǎng)景，el-table設(shè)置默認(rèn)屬性default-sort失效。 el-table的default-sort屬性是針對(duì)靜態(tài)數(shù)據(jù)的，如果是動(dòng)態(tài)數(shù)據(jù)，default-sort則無法監(jiān)聽到。 案例：靜態(tài)數(shù)據(jù) 默認(rèn)排序正常 案例：模擬動(dòng)態(tài)數(shù)據(jù)(setTimeout模擬后端延時(shí)數(shù)據(jù)返回) 默認(rèn)排序失效 等待數(shù)據(jù)渲染結(jié)束后(n

  2024年02月12日

  瀏覽(32)
• 

  Vue3 element-plus el-select 無法選中，又不報(bào)錯(cuò)

  html 結(jié)構(gòu) js 代碼 點(diǎn)擊下拉選項(xiàng)，輸入框無法選中 原因：ref=“conditionForm” 和 :model=“conditionForm” 沖突了， 4-1. 再Vue2里面 :model=“conditionForm” 綁定的是 conditionForm 變量， ref=“conditionForm” 綁定的是conditionForm字符串 v-model=“conditionForm.personnel” 綁定的 conditionForm 變量下屬性

  2023年04月27日

  瀏覽(26)

• vue3+element-plus+el-image實(shí)現(xiàn)點(diǎn)擊按鈕預(yù)覽大圖

  需求：點(diǎn)擊某個(gè)按鈕實(shí)現(xiàn)el-image中預(yù)覽大圖的效果 官方文檔：以下是官方的寫法，并不能達(dá)到我們的要求，官方實(shí)現(xiàn)的功能是點(diǎn)擊圖片達(dá)到預(yù)覽大圖的效果。如果你的按鈕就是圖片，也可以達(dá)到目前的功能 el-image-viewer組件是element官方的組件，只是文檔中沒有寫出來，這個(gè)組

  2024年02月12日

  瀏覽(33)
• 

  vue3.0 element-plus 不同版本 el-popover 循環(huán)優(yōu)化

  表格內(nèi)循環(huán)el-popover? 渲染以后的頁(yè)面，數(shù)據(jù)量很大的時(shí)候頁(yè)面會(huì)卡，生成的代碼： 解決思路： 將el-popover提出來，不參與循環(huán)，讓el-popover只渲染一次 ? 1、以1.1.0-beta.24版為例（低版本） 紅色下劃線部分是關(guān)鍵點(diǎn) ? ? v-popover的值與el-popover的ref值要一致 2、以2.3.9版為例（當(dāng)前

  2024年02月12日

  瀏覽(29)
• 

  vue3+element-plus點(diǎn)擊列表中的圖片預(yù)覽時(shí)，圖片被表格覆蓋

  視覺 點(diǎn)擊圖片進(jìn)行預(yù)覽，但還能繼續(xù)選中其他的圖片進(jìn)行預(yù)覽，鼠標(biāo)放在表格上，那一行表格也會(huì)選中，如圖所示第一行的效果。 代碼 官網(wǎng)文檔有這么一個(gè)屬性，官網(wǎng)是這個(gè)描述的Image屬性。 在 el-image 中加入屬性 preview-teleported=\\\"true\\\" 即可。

  2024年02月13日

  瀏覽(45)

• 【踩坑筆記】vue3 element-plus el-input 無法輸入問題

  原因是 el-form 的 v-model=\\\"loginForm\\\" ref=\\\"loginForm\\\" 在vue3中值不能相同 把ref去掉或者改名即可 這是js的代碼（ 對(duì)象記得用reactive，不然也會(huì)無法輸入 ） 這個(gè)是可以輸入的 這是無法輸入的 就改了個(gè)ref

  2024年02月11日

  瀏覽(31)
• 

  vue3+ts+element-plus實(shí)際開發(fā)之導(dǎo)出表格和不同類型之間相互賦值

  1. 安裝依賴 npm run xlsx 2. 引入，import * as XLSX from “xlsx”; 3. 報(bào)錯(cuò)找不到模塊“xlsx”或其相應(yīng)的類型聲明 修改成大寫就好了 import * as XLSX from \\\'XLSX\\\' ，如果沒有報(bào)提示就直接用 4. 使用導(dǎo)出文件 //---- 導(dǎo)出表 1. 直接用a標(biāo)簽下載 鼠標(biāo)移入樣式，點(diǎn)擊自動(dòng)下載 2. 有特殊數(shù)據(jù)需要解析

  2024年02月15日

  瀏覽(30)