資料回顯-級聯元件-cascader_element-ui

目錄

文章目錄

• • 1、全加載模式
  • 2、懶加載模式
  • ***後記*** ：

内容

接上一篇部落格，這裡講解下級聯框的資料回顯問題及解決方案。

• 場景：對已有級聯框資料的修改

下面就全加載和懶加載分别講解

1、全加載模式

全加載模式前面說過，其中之一優勢就是資料回顯很友善。下面以之前省市級3級地區級聯框為例。

• 分析：如何回顯資料呢？
  1. 檢視當級聯框選擇時，v-model綁定的值 。如下，

     ["山東省","泰安市","甯陽縣"]

  2. 我們把已有資料改造成v-model綁定值的形式，資料是不是就回顯了呢？
  3. 我們之前存儲到資料表中的資料這樣子的

     "山東省-泰安市-甯陽縣"

     通過string.split(’-’)直接指派
  4. 資料回顯成功，說明我們的思路沒問題，如圖：

     

2、懶加載模式

按照上面的思路，回顯并不會成功？因為資料是通過點選上級節點，擷取下級資料，全部資料沒有的情況下，數組中的4級分類無法回顯渲染。有沒有其他方法呢？

答案是肯定的，這裡是參考其他部落格解決的，部落格位址=https://blog.csdn.net/oneclarence/article/details/106271197=

簡單把思路理一下：

• 既然請求已經傳回了行業的分類資料，我們隻是要把資料回顯（也就是展示）
• 級聯框的placeholder屬性剛好是展示提示資訊的。
• 我們就把資料指派給plackeholder完成，這裡會出現寫小問題，等下展示圖檔的時候在說
• 代碼如下：

  <el-cascader
    			v-model="industries"
    			:props="industryOptions"
    			:placeholder="this.form.industryName || '請選擇所屬行業'"
    			style="width: 100%"
    			class="industry"
    			@change="setIndustry"
     ></el-cascader>
             

• 效果圖示：

  

小夥伴發現問題了嗎？對的就是回顯樣式問題，對比上面 placeholder預設的樣式有些淺，不夠明亮。那麼怎麼修改elementui的預設樣式呢？

通過搜尋這裡找到一篇部落格，實驗了下成功了，給出部落格位址=https://www.cnblogs.com/aurora-ql/p/13308107.html=。

• 這裡采用 scope + /deep/的方式，不會影響所有的elementui樣式，隻修改目前頁對應類下面的placeholder樣式
• 代碼如下：

  <style scoped>
   /deep/ .industry input::-webkit-input-placeholder {
     color: #717171 !important;
   }
   /deep/ .industry input::-moz-placeholder {
     /* Mozilla Firefox 19+ */
     color: #717171 !important;
   }
   /deep/ .industry input:-moz-placeholder {
     /* Mozilla Firefox 4 to 18 */
     color: #717171 !important;
   }
   /deep/ .industry input:-ms-input-placeholder {
     /* Internet Explorer 10-11 */
     color: #717171 !important;
   }
   </style>
             

• 提示：
  • scope屬性需要加，不然所有的elementui placeholder樣式都會改變
  • <el-cascader class=“industry”> 給相應改變樣式的标簽加上class ,這樣隻改變指定的級聯框的placeholder樣式
• 效果圖示：

  

至此elementui級聯框資料回顯完成，下面繼續完成公司管理子產品，頁面完成代碼後續部落格還有下面的碼雲倉庫都有。

後記 ：

本項目為參考某馬視訊開發，相關視訊及配套資料可自行度娘或者聯系本人。上面為自己編寫的開發文檔，持續更新。歡迎交流，本人QQ:806797785

後端JAVA源代碼位址:https://gitee.com/gaogzhen/ihrm-parent    // 後端項目
前端項目源代碼位址：https://gitee.com/gaogzhen/ihrm-vue    // 前端背景管理系統