element中el-cascader级联 下拉选择-可单独多选(整理)

简介: element中el-cascader级联 下拉选择-可单独多选(整理)

效果图:


         

<el-cascader :options="regionsData" v-model="rankData.platform"
            :props="{value: 'id', label: 'name', children: 'child', multiple: true, checkStrictly: true }"
            collapse-tags></el-cascader>

备注:回显需要值

var newArr = []
var aa = [];
var bb = [];
// console.log(row, '262---------')
// console.log(row.area_list, '263---------')
for (var j = 0; j < row.bind.length; j++) {
  aa.push([row.bind[j].province_id,row.bind[j].city_id])
  bb.push([row.bind[j].province_id,row.bind[j].city_id,row.bind[j].area_id])
}
this.rankData.areaIdAll = [...aa,...bb];  //就处理成需要回显的数据了
相关文章
|
5月前
|
前端开发 微服务
Element-Plus 表格 el-table 如何支持分页多选
Element-Plus 表格 el-table 如何支持分页多选
|
6月前
|
JavaScript
Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点
Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点
87 0
|
6月前
element-ui下拉框el-select多选出现滚动条闪现
弹窗组件中放置了el-select下拉框组件,多选项较多时,聚焦弹出下拉选择框时,下方会出现一个横向滚动条闪现一下,虽然不影响使用,但是作为一个追求完美的码农肯定是受不了
85 0
el-table树形结构的复选-子级可选(整理)
el-table树形结构的复选-子级可选(整理)
el-table树形结构的复选-子级可选(整理)
|
JavaScript
VUE element-ui之table表格全选框(复选框)隐藏
VUE element-ui之table表格全选框(复选框)隐藏
1370 0
VUE element-ui之table表格全选框(复选框)隐藏
|
前端开发
element ui el-table 多选 表头全选框替换文字
element ui el-table 多选 表头全选框替换文字
1444 0
|
JavaScript
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
1883 0
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
|
2月前
|
数据库
vue+elementui中,el-select多选下拉列表中,如何同时获取:value和:label的值?
vue+elementui中,el-select多选下拉列表中,如何同时获取:value和:label的值?
20 0
|
4月前
|
缓存 JavaScript 前端开发
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
|
5月前
el-cascader组件实现点击、递归勾选联动子集children所有选项被选中。
el-cascader组件实现点击、递归勾选联动子集children所有选项被选中。