数据回显-级联组件-cascader_element-ui

数据回显-级联组件-cascader_element-ui

---

目录

---

---

内容

---

接上一篇博客，这里讲解下级联框的数据回显问题及解决方案。

• 场景：对已有级联框数据的修改

下面就全加载和懒加载分别讲解

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    // 前端后台管理系统