v-for="(domain, index) in dynamicValidateForm.domains"

:label="‘站点‘ + index"

:key="domain.id"

>

v-for="item in testData"

:key="item.id"

:label="item.testName"

:value="item.id"

:disabled="item.disabled">

style="height: auto"

:value="domain.colName">

删除

@click="addDomain">添加站点

测试

export default {

name: "PushManagement",

data(){

return {

dynamicValidateForm: {

domains: [{

colName: ‘‘, // 栏目名称

id: null, // 站点id

colId: null, // 栏目id

children: [] // 站点下的栏目列表

}],

},

testSiteId: null,

defaultProps: {

children: ‘children‘,

label: ‘name‘

},

testData: [{

testName: ‘站点一‘,

id: 1,

children: [{

name: ‘栏目一‘,

colId: 11

},{

name: ‘栏目二‘,

colId: 12,

children: [{

name: ‘栏目二 - 子栏目‘,

colId: 121,

}]

}]

},{

testName: ‘站点二‘,

id: 2,

children: [{

name: ‘栏目三‘,

colId: 21

},{

name: ‘栏目四‘,

colId: 22,

children: [{

name: ‘栏目四 - 子栏目‘,

colId: 221,

}]

}]

},{

testName: ‘站点三‘,

id: 3,

children: [{

name: ‘栏目五‘,

colId: 31

},{

name: ‘栏目六‘,

colId: 32,

children: [{

name: ‘栏目六 - 子栏目‘,

colId: 321,

}]

}]

}],

// 回显站点 栏目

echoSiteData: [{

id: 2,

colId: 21,

colName: "栏目三"

}, {

id: 3,

colId: 321,

colName: "栏目六 - 子栏目"

}]

}

},

methods: {

submitForm(formName) {

this.$refs[formName].validate((valid) => {

if (valid) {

alert(‘submit!‘);

console.log(this.dynamicValidateForm)

} else {

console.log(‘error submit!!‘);

return false;

}

});

},

removeDomain(item) {

var index = this.dynamicValidateForm.domains.indexOf(item)

if (index !== -1) {

this.dynamicValidateForm.domains.splice(index, 1)

this.merOrCityChange(this.testData,this.dynamicValidateForm.domains)

}

},

addDomain() {

this.dynamicValidateForm.domains.push({

colName: ‘‘,

id: null,

colId: null,

children: []

});

},

// 栏目点击 绑定栏目对应的站点id

colSelClick(id){

// console.log(‘点击栏目‘)

// console.log(id)

this.testSiteId = id

},

// 站点下拉框 改变

testSite(id){

this.testSiteId = id

let testColData = {}

for(let i = 0; i< this.testData.length; i++){

if(this.testData[i].id == id){

testColData = this.testData[i]

}

}

let data = this.dynamicValidateForm.domains

for(let i = 0; i < data.length; i++){

if(data[i].id == testColData.id){

data[i].colName = ‘‘

data[i].colId = null

data[i].children = testColData.children

}

}

// console.log(‘是否存在站点id‘)

// console.log(this.dynamicValidateForm.domains)

this.merOrCityChange(this.testData,this.dynamicValidateForm.domains)

},

// 栏目选择树 改变

handleNodeClick(data,node,obj) {

// console.log(‘下拉框‘)

// console.log(data)

// console.log(this.testSiteId)

// console.log( this.dynamicValidateForm)

let arr = this.dynamicValidateForm.domains

for(let i = 0; i < arr.length; i++){

if(arr[i].id == this.testSiteId){

arr[i].colName = data.name;

arr[i].colId = data.colId

}

}

},

// 站点 禁选

merOrCityChange(data,data2){ // data 原始数据 data2 站点下拉框--站点 (必须都是数组)

let arr = []

if(!data || !data2 || data.length <= 0 || data2.length <= 0)return

for(let i = 0; i < data.length; i++){

for(let j = 0; j < data2.length; j++){

data[i].disabled = false

if(data[i].id == data2[j].id){

arr.push(data[i])

}

}

}

// console.log(‘存在的站点id‘)

// console.log(arr)

if(arr.length > 0){

for(let i = 0; i< data.length; i++){

for(let j = 0; j< arr.length;j++){

if(data[i].id == arr[j].id){

data[i].disabled = true

}

}

}

}

},

// 回显 站点栏目

echoSite(echoSiteData){

if(echoSiteData.length > 0){

this.dynamicValidateForm.domains = []

for(let i = 0; i

for(let j = 0; j < echoSiteData.length; j++){

if(this.testData[i].id === echoSiteData[j].id){

this.dynamicValidateForm.domains.push({

colName: echoSiteData[j].colName,

id: echoSiteData[j].id,

colId: echoSiteData[j].colId,

children: this.testData[i].children

});

}

}

}

this.merOrCityChange(this.testData,this.dynamicValidateForm.domains)

}

}

},

created(){

this.echoSite(this.echoSiteData)

},

}

vue动态生成下拉框_vue+elementui 动态创建下拉框相关推荐

  1. vue动态发布到线上_vue在线动态切换主题色方案

    主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件we ...

  2. 动态生成li 根据后台返回个数动态生成li

    //根据后台返回端口个数动态生成 for (let i = 0; i < 8; i++) {var temp=` <li><p>P`+i+`</p><i ...

  3. 动态生成java类_Java 运行时动态生成class

    Java是一门静态语言,通常,我们需要的class在编译的时候就已经生成了,为什么有时候我们还想在运行时动态生成class呢? 因为在有些时候,我们还真得在运行时为一个类动态创建子类.比如,编写一个O ...

  4. 动态生成html点击事件无效,动态生成的DOM不会触发onclick事件的原因及解决方法...

    最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击"展开评论"后获取该微博的所有评论.这里使用了动态加载的点击加载评论. 然后再写 $(".get_comment ...

  5. c语言动态生成二维数组,C语言 动态创建二维数组

    /*C语言 如何动态创建二维数组 转化为一维数组申请数组,创建和释放都比较简单 */ #include #include #include #define RANK 10 #define COLUMN ...

  6. vue中pdf预览组件_Vue+ElementUI使用vue-pdf实现预览功能

    Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下 1.安装 vue-pdf npm install --save vue-pdf 2.在vue页面中导入对应 ...

  7. vue项目全局配置微信分享_Vue项目history模式下微信分享总结-个人文章-SegmentFault思否...

    每回遇到微信分享都是一个坑,目前的商城项目使用vue开发,采用history的路由模式,配置微信分享又遇到了很多问题,最后终于解决了,现将解决的过程分享一下. 原文https://justyeh.to ...

  8. vue 如何生成一个dom元素_vue 学习心得——DOM树如何被构建

    代码编辑不够友好,为更好一点的阅读体验,还是推荐原文链接:https://www.yuque.com/longtengsong/blog/bu09tk DOM 树是 vue 在构建实例的时候,通过 $ ...

  9. js vue 设置excel单元格样式_vue+elementui 项目纯前端Export2Excel导出excel,并利用xlsx-style设置单元格样式...

    1 /*eslint-disable*/ 2 require('script-loader!file-saver');3 require('./Blob.js'); //blob.js也是网上找的,下 ...

最新文章

  1. Google 全球员工围攻 Google!
  2. 中班机器人上课视频_中班机器人律动公开课
  3. Spring知识点提炼
  4. Android下的junit 单元测试
  5. opengl 流程梳理
  6. _stat64获取错误_Log4j,Stat4j,SMTPAppender集成–汇总错误日志以发送过多电子邮件...
  7. 1057: [ZJOI2007]棋盘制作 - BZOJ
  8. 度量两个概率分布差异性/距离的指标总结_KL 散度(相对熵)交叉熵 JS散度 Wasserstein-1距离 Earth-Mover (EM)distance
  9. 高斯模糊 高斯核函数
  10. UTC时间转北京时间原理与matlab代码
  11. linux中sz命令怎么使用,Linux rz和sz命令使用教程
  12. c语言单元二实验报告,C语言实验报告.doc
  13. 前有狗屁不通文章生成器 | 后有申论生成器
  14. MATLAB 字符串数组
  15. MySQL——页的理解
  16. 多智能体仿真环境NetLogo介绍之导入外部数据
  17. 2019年Java就业前景如何?新手还能学Java开发吗?
  18. 免费的线框工具,UI设计工具,PDFs,资源等
  19. 百度地图API跨域问题解决
  20. animationkeyframe在IOS下浏览器显示问题

热门文章

  1. 关于java结构中描述正确的是_下列关于Java中类的构造方法的描述,正确的是()...
  2. 地平线机器人_地平线机器人CEO余凯:基于深度学习的自动驾驶之路
  3. Matlab repmat函数
  4. MATLAB求解非线性方程组
  5. 用户画像是怎么生成出来的?
  6. idea 导出war包_使用IDEA实现远程代码DEBUG调试教程详解
  7. 2017年计算机三级网络技术试题,2017年计算机三级网络技术考前试题及答案(8)
  8. linux c 11 运行库,11.1.3 运行库与I/O
  9. python中的大数据品牌运营专业公司_国内最好的专业数据分析公司有哪些?
  10. 计算机网络结构示意图,计算机网络原理-计算机网络体系结构.pdf