elementui Cascader 级联选择器的使用总结

实现效果

技术要点总结如下:

1、点击添加自动增加多行,实现自主选择增加多条节点数据

2、节点地址使用的是Cascader 级联选择器,需要动态生成,涉及到一个技术要点是:因v-modal只能获取value不能获取label,故需要解决在多个动态生成的Cascader 分别获取他们选中的label和value,


javascript 复制代码
下面开始展示相关代码:

html:

 <el-dialog :title="title" :visible.sync="open" width="1300px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddPlatCarLineDetail">添加</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeletePlatCarLineDetail">删除</el-button>
          </el-col>
        </el-row>
        <el-table :data="platCarLineDetailList" :row-class-name="rowPlatCarLineDetailIndex" @selection-change="handlePlatCarLineDetailSelectionChange" ref="platCarLineDetail">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="序号" align="center" prop="index" width="50"/>
          <el-table-column label="节点名称" prop="nodeName" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.nodeName" placeholder="请输入节点名称" />
            </template>
          </el-table-column>
          <el-table-column label="节点地址" prop="nodeAddress" width="250" >
            <template slot-scope="scope">
              <el-cascader
                v-model="valueNode[scope.$index]"
                :options="optionsNodeSource"
                :props="{value:'id',label:'name'}"
                :ref="'cascader'+scope.$index"
                @change="handleChange(scope.$index)"></el-cascader>
            </template>
          </el-table-column> 
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
js:

handleChange(index){
  var that=this
  var name='cascader'+index
//this.valueNode[index] 对应的是省市区的id  nameArr对应的是省市区的name
  var nameArr=this.$refs[name].getCheckedNodes()[0].pathLabels
  that.$nextTick(function () {
    that.platCarLineDetailList[index].nodeAddress=nameArr
    console.log(that.platCarLineDetailList,that.valueNode)
    that.$forceUpdate()
  })
},
/** 车线详情添加按钮操作 */
handleAddPlatCarLineDetail() {
  var that=this
  that.$nextTick(function () {
    let obj = {};
    obj.nodeName = "";
    obj.nodeAddress = ""; 
    that.valueNode.push([])//在data中定义格式为[[]]
    that.platCarLineDetailList.push(obj); 
    that.$forceUpdate()
  })
},
/** 车线详情删除按钮操作 */
handleDeletePlatCarLineDetail() {
  if (this.checkedPlatCarLineDetail.length == 0) {
    this.$modal.msgError("请先选择要删除的车线详情数据");
  } else {
    const platCarLineDetailList = this.platCarLineDetailList;
    const valueNode = this.valueNode;
    const checkedPlatCarLineDetail = this.checkedPlatCarLineDetail;
    this.platCarLineDetailList = platCarLineDetailList.filter(function(item) {
      return checkedPlatCarLineDetail.indexOf(item.index) == -1
    });
    this.valueNode = valueNode.filter(function(item,indexV) {
      var num=indexV+1
      return checkedPlatCarLineDetail.indexOf(num) == -1
    });
 
  }
},

代码解释

复制代码
相关推荐
像风一样自由20201 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem2 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊2 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术2 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing2 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止3 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall3 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴3 小时前
简单入门Python装饰器
前端·python
袁煦丞4 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码4 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github