实现选择器多选依次下发

实现选择器多选下发

css

为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组,若要实现多个下发，在js要进行数据处理：遍历循环此数组。

<el-form-item label="节点选择"><el-selectv-model="sourceNode"multiplecollapse-tagsstyle="margin-left: 20px"placeholder="请选择"><el-optionv-for="(item, index) in nodes":key="index":label="item.name":value="item['res-id']"></el-option></el-select></el-form-item>

js

data(){return{sourceNode: "",
}
}computed: {nodes() {return this.$store.getters.node;},},async submit() {this.$refs.form.validate((valid) => {if (valid) {console.log(this.sourceNode);//this.sourceNode为数组  ['1f72e5fa-9cd6-11eb-9800-286ed4b1cab6', '1e50fb8a-9cd6-11eb-8034-286ed4b1caea', __ob__: Observer]//遍历数组获取需要的单个字符串for (let i = 0; i < this.sourceNode.length; i++) {const element = this.sourceNode[i];this.form["node-id"] = element;// 获取ssh数据接口apis.getNodeSsh(this.form["node-id"]).then((res) => {let ssh = res.data.server[0];//构造下发数据结构let nodeSouthData = {'node-id': element,'ifit-node': {'ifit-node-id': 2,},createTime: formatter.date(new Date()),updateTime: formatter.date(new Date()),'ssh-connect': {ip: ssh.ip,port: ssh['current-ssh-user'] ? ssh.port : ssh['default-port'],ipFamily: ssh['ip-family'],userName: (ssh['current-ssh-user']? ssh['current-ssh-user']: ssh['default-ssh-user']).userName,password: (ssh['current-ssh-user']? ssh['current-ssh-user']: ssh['default-ssh-user']).password,encryType: (ssh['current-ssh-user']? ssh['current-ssh-user']: ssh['default-ssh-user']).encryptType,},}console.log(nodeSouthData);// 向设备下发apis.safelyUpdateIfitNodeSouth(nodeSouthData).then((res) => {this.$message.success("配置成功");this.cancel();});});}}});},

实现选择器多选依次下发相关推荐

element-ui中el-cascader级联选择器多选判断是否是全选
给定如多级级联选择器,如果只选中第三级,则展示第三级,如果全选第一级或者第二级则只展示第一级或者第二级.(一级选项如果全部选中的话,只用获取一级选项的值就行了,如果没有全部选中 ,再获取二级选项的值) ...
elementSelect 选择器多选名称过长撑开变高,超出选择框，有多个时并会撑开原始高度优化方式
我们用elementui 多选下拉选框长度固定的情况下,选择多个长度时会强制撑开高度,那么怎么让他不换行.不撑开,而是超过的长度显示省略呢? 首先给el-select一个class名称,随意给,我给的 ...
iviewui DatePicker 日期选择器限制选取时间跨度
需求: 当前日期是 2022年4月27日,要求当天后的日期不可选,选中的日期跨度是4天,比如我选13号,13号前四天后四天是可选的,其余都不可选. vue + ivewUI <DatePick ...
Vue elementui select选择器全选功能带搜索（左匹配）
效果图: <el-selectv-model="valuesList"multiplecollapse-tagsfilterable:filter-method=" ...
element时日期选择器禁选某段日期
<el-date-picker v-model="value" :picker-options="pickerOptions"type="dat ...
jQuery-1.样式篇---选择器
jQuery选择器之id选择器页面的任何操作都需要节点的支撑,开发者如何快速高效的找到指定的节点也是前端开发中的一个重点.jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处 ...
JQuery简介选择器
JQuery简介&选择器文章目录 JQuery简介&选择器一.jquery介绍二.jquery加载三.jquery选择器 1.id选择器 2.类选择器 3.元素选择器 4.全选 ...
JQuery中的全选择器（通配符）
全选择器(*选择器) 在CSS中,经常会在第一行写下这样一段样式 * {padding: 0; margin: 0;} 通配符*意味着给所有的元素设置默认的边距.jQuery中我们也可以通过传递*选择 ...
js时间选择器_Vuestic Admin一款免费与美妙基于Vue.js开发的管理模板
Vuestic Admin 简介 vuestic admin是一款流行,免费与美妙的基于Vue.js开发出来的管理模板,包括38以上个定制用户界面组件,由Epicmax开发,由Vasili Savit ...

实现选择器多选依次下发

实现选择器多选下发

css

js

实现选择器多选依次下发相关推荐

最新文章

热门文章