#|Vue -- v-for 深度实践 & cascader 选择器回显 & el-switch 回显
效果：初始有一个空框，点击下方 添加软件信息 按钮可以添加一个信息框，点击左侧的小减号可以删除一个信息框
文章图片
文章图片
html
="float:left;
position:relative;
font-size:16px;
color:#D65C49;
cursor:pointer;
margin-top:45px;
margin-left:30px;
"
class="el-icon-remove" @click="removeSoftInfo(index)">
其中内容见下
具体内容
注1：v-for="(item,index) in appTemplateForm.softwareInfo
遍历 appTemplateForm.softwareInfo 中的元素，index 表示索引，item 表示 appTemplateForm.softwareInfo 中的一个 jsonObj 对象。每个信息框都是基于 item 作为数据源的。obj 对象中包含的属性可以参考 addSoftInfo 方法
js
appTemplateForm:{
softwareInfo:[]
},
// 选项框三层级联，软件信息下拉框数据源
// 这个数据源是通用的，每个信息框的源都一致
softwareOptions: [],
this.methods = {
getSoftwareOptions(){
let _self = this;
$.ajax({
url : path + "/test/testAction!getSoftwareOptions.action",
cache: false,
type : 'post',
dataType:'json',
success : function(data) {
_self.softwareOptions=data;
},
error : function(err) {
}
});
},
// 级联选择框变化时触发的事件
handleChange(index) {
let _self = this;
var _softwareName = _self.appTemplateForm.softwareInfo[index].softwareName;
// 信息框选择的软件变了，则自动清空与其相关联的模板信息
_self.appTemplateForm.softwareInfo[index].softwareTempName = '';
// _softwareName示例：
// cascader组件--下拉框有值被选中后，选中值的数据格式
// ["8a84ad4d7152b99e017152bce05b0005", "Tomcat", "8a84ad4d71bae97e0171baf166d30004"]
// 第一个参数是swTypeId,第二个参数是软件名,第三个参数是softwareId
_self.getTempOptions(_softwareName,index);
},
getTempOptions(_softwareName,index){
let _self = this;
$.ajax({
url : path + "/test/testAction!getTempOptions.action",
cache: false,
type : 'post',
dataType:'json',
data:{
version:_softwareName[2]
},
success : function(data) {
// 这个方法的作用在于:
// 在每个信息框中，前面的软件信息选中之后，后面的模板信息下拉框也会跟着变化
// 找出与这个软件关联的软件模板
var template = data.template;
var relatedTemps=[];
for(var i=0;
i注1：cascader 选择器回显：先准备好下拉框的数据源，即
:options="softwareOptions" 中的 softwareOptions，具体是在 this.mounted 中调用 getSoftwareOptions 方法后台需要将
v-model="item.softwareName" 中的 softwareName 构造成一个 List 数组，需要注意的是构造的数组值必须是选择器的 value 值，而非 label 值。并且三个 value 值与 softwareOptions 中的值必须完全对应，才可以正确回显List> sfInfo = new ArrayList>();
sfInfo.add(sf.getCategory());
sfInfo.add(sf.getName());
sfInfo.add(softwareId);
jsonobj.put("softwareName", sfInfo);
注2：el-switch 回显：
v-model="item.afterInstall" 对应的值必须是 boolean 类型才能回显成功jsonobj.put("afterInstall", Boolean.parseBoolean(jo.getString("afterInstall")));
this.mounted=function(){
this.getSoftwareOptions();
// 新增时默认给一个框
if(this.isAdd){
this.addSoftInfo();
}else{
// 编辑时回显
this.getAppTemplateInfo();
}
}
.sideline_inner{
width:100%;
border:1px dashed #409EFF;
display: inline-block;
}.sideline_outer{
margin:0px 100px 10px 60px;
}
【#|Vue -- v-for 深度实践 & cascader 选择器回显 & el-switch 回显】三层级联后台数据源格式参考：https://element.eleme.cn/#/zh-CN/component/cascader
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 《深度倾听》第5天──「RIA学习力」便签输出第16期
- VueX--VUE核心插件
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show