vue动态生成下拉框_vue+elementui 动态创建下拉框

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)

},

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366392.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[贝聊科技]网页端「应用跳转」技术实现演变

本文作者&#xff1a;Mr.Luo &#xff0c;贝聊前端经理。本文同时发布于作者 个人博客 。 由于网页传播的便捷性&#xff0c;从网页向APP导流几乎是所有APP厂商都会采用的推广手段&#xff0c;具体来说就是在网页上提供一些触发点&#xff08;例如按钮、链接&#xff09;&#…

常见Java错误的十大列表(前100名!)

前10名名单非常受欢迎&#xff0c;有趣且内容丰富。 但是有很多&#xff01; 如何选择合适的&#xff1f; 这是一个元前10名列表&#xff0c;可帮助您找到前10名的前10名列表。 在更令人讨厌的笔记上&#xff1a; SELECT TOP 10 mistake FROM source1 UNION ALL SELECT TOP 10…

Ubuntu 16.04 下octave的使用入门

SciLab和octave是开源的且免费的矩阵计算工具&#xff0c;二者都有希望成为矩阵计算的新宠。相比之下&#xff0c; octave与MatLab的兼容性更高。octave遵循GPL协议&#xff08;GNU General Public License&#xff09;&#xff0c;用户可以单独发行octave或者包含在其产品中发…

hydra mysql 爆破_Hydra(爆破神器)使用方法

文本框 textarea 动态显示行数(简单文本编辑器)工作需求做一个文本编辑器简单的. 右边输入文字,左边会显示相应的代码行.清空也会变为1. 废话不多说上代码,自己理解. python中set使用In [2]: a set() # 常用操作1 In [3]: a Out[3]: set() In [4]: type(a) Out[4]: set In [5]…

消除switch语句以获得更好的代码结构

消除switch语句以获得更好的代码结构 代码演化1&#xff1a;纯switch function counter(state 0, action) {switch (action.type) {case INCREMENT:return state 1case DECREMENT:return state - 1default:return state} }用三元运算符代替 const counter (state 0, ac…

HTTP请求中POST与GET的区别

一、原理区别 一般我们在浏览器输入一个网址访问网站都是GET请求;在FORM表单中&#xff0c;可以通过设置Method指定提交方式为GET或者POST提交方式&#xff0c;默认为GET提交方式。 HTTP定义了与服务器交互的不同方法&#xff0c;其中最基本的几种&#xff1a;GET&#xff0c;P…

Linux服务器配置---安装vsftpd

安装vsftpd 大多数Linux系统都使用vsftpd&#xff0c;因此这里我们也安装vsftpd 1、安装vsftpd [rootlocalhost phpMyAdmin]# yum install -y vsftpd Loaded plugins: fastestmirror, refresh-packagekit, security Installed: vsftpd.i686 0:2.2.2-11.el6_4.1 …

Java方法中的参数太多,第1部分:自定义类型

我认为构造函数和方法中冗长的参数列表是Java开发中的另一个“ 危险信号 ”&#xff0c;就逻辑和功能而言&#xff0c;它们不一定是“错误的”&#xff0c;但通常暗示当前或将来出现错误的可能性很高。 在一小部分帖子中&#xff0c;我介绍了一些可用于减少方法或构造函数的参数…

mysql怎么制作柱状图_从数据库中取出最近三十天的数据并生成柱状图

在终端用cd 命令进入文件目录说明&#xff1a;此处例子我是拿项目中的一个例子讲解的。1、新建一个项目 &#xff1a;用终端输入&#xff1a;zf create project Airline 格式&#xff1a;zf create action project project-name 备注&#xff1a;这些格式可以在终端输入zf 查看…

关于ES6的Promise

JavaScript的异步处理 提到JavaScript的异步处理&#xff0c;也许很多人和我一样想到利用回调函数。 例如&#xff1a; firstAsync(function(data){//处理得到的 data 数据//....secondAsync(function(data2){//处理得到的 data2 数据//....thirdAsync(function(data3){//处…

为hexo博客添加基于gitment评论功能

关于gitment gitment其实就是利用你的代码仓库的Issues&#xff0c;来实现评论。每一篇文章对应该代码仓库中的 一个Issues,Issues中的评论对应你的博客每篇文章中的评论。如果你是用github的博客的话 用起来将会十分的方便。 注册github应用 首先需要在这注册一个OAuth Applic…

[转]我是如何走进黑客世界的?

*本文原创作者&#xff1a;MyselfExplorer&#xff1b;翻译编辑&#xff1a;楼兰&#xff0c;本文属FreeBuf原创奖励计划&#xff0c;未经许可禁止转载 我想给你一把打开这扇门的钥匙&#xff0c;而你要做的便是静静的聆听接下来的故事。挖掘 0day 一般需要掌握fuzzing&#xf…

使用Servlet 3.0,Redis / Jedis和CDI的简单CRUD –第1部分

在这篇文章中&#xff0c;我们将构建一个简单的用户界面。 数据将存储在Redis中。 为了与Redis交互&#xff0c;我们将使用Jedis库。 CDI用于Depedency Injection&#xff0c;而Servlet 3.0用于视图。 让我们从Redis / Jedis部分开始。 您可以在这些 帖子中找到有关Redis和Jed…

Socket.io 深入理解

最近在做项目优化工作时&#xff0c;用到了Socket.io , Socket.io 文档比较少&#xff0c; 结合官网介绍以及自己在项目开发中的摸索&#xff0c;总结如下内容&#xff1b; Socket.io将Websocket和轮询 &#xff08;Polling&#xff09;机制以及其它的实时通信方式封装成了通用…

python填表_小Python填表得到d

我正在尝试使用Scrapy从网站自动下载数据。在我要做的是&#xff1a;使用我的凭据登录网站通过在“RIC”行中写入代码并选择感兴趣的时段来选择我想要的数据单击“获取数据”后&#xff0c;将生成.csv文件&#xff0c;我可以从“下载/”url下载该文件&#xff0c;其中我的所有文…

如何使用异步Servlet来提高性能

这篇文章将描述一种性能优化技术&#xff0c;适用于与现代Web应用程序相关的常见问题。 如今的应用程序不再只是被动地等待浏览器发起请求&#xff0c;而是希望自己开始通信。 一个典型的示例可能涉及聊天应用程序&#xff0c;拍卖行等–共同点是以下事实&#xff1a;大多数时间…

我理解中的“大前端”/“大无线”

本文内容较长&#xff0c;大概需要15分钟时间阅读。 内容包含五部分&#xff1a;前言&#xff0c;NodeJS职能变化&#xff0c;ReactNative的大规模应用&#xff0c;专门的架构组职能&#xff0c;总结。主要是介绍我所在团队最近的一些变化和思考。 更多信息可以加入我的小密圈关…

STM32之Systick(系统时钟滴答定时器)

systick定时器有两个可选的时钟源&#xff0c;一个是外部时钟源&#xff08;STCLK&#xff0c;等于HCLK/8&#xff09;&#xff0c;另一个是内核时钟&#xff08;FCLK&#xff0c;等于HCLK&#xff09;。假若你选择内核时钟&#xff0c;并将HCLK频率设置为72MHz的话&#xff0c…

Dirichlet分布

1.预备知识 Beta分布函数是一种定义在实数区间[0,1]的特殊函数&#xff0c;它是二项式分布的共轭分布&#xff1b;与Beta分布相同&#xff0c;Dirichlet分布也是定义在实数区间[0,1]的概率度量函数&#xff0c;Dirichlet分布是多项式分布的共轭分布&#xff0c;Dirichlet分布的…

python编程制作接金币游戏_pygame学习笔记(6):完成一个简单的游戏

学了这么长时间的Pygame&#xff0c;一直想写个游戏实战一下。看起来很简单的游戏&#xff0c;写其来怎么这么难。最初想写个俄罗斯方块&#xff0c;想了很长时间如何实现&#xff0c;想来想去&#xff0c;也没写出来&#xff0c;于是干脆下载别人的代码来读。后来&#xff0c;…