element-ui的级联选择器根据后台给的value值给定默认值

一.页面代码

     <el-cascader
		       :options="item.dataValue.data"
		        :props="{checkStrictly: true}"
		        :show-all-levels="false"
		        :value="getCascaderList(item.dataValue.data , item.dataValue.value , [] )"
		        @change="change"
		        clearable>
      </el-cascader>

二. js递归方法给定默认值

//第一个参数 list=> 数据列表
//第二个参数 val=>后台给的默认value值
// 第三个参数 arr=>空数组
getCascaderList(list, val, arr) {
      if (!list) {
        return ''
      }
      let findParent = (data, nodeId, parentVal) => {
        for (var i = 0, length = data.length; i < length; i++) {
          let node = data[i]
          if (node.value === nodeId) {
            arr.unshift(nodeId)
            if (nodeId === list[0].value) {
              break
            }
            findParent(list, parentVal)
            break
          } else {
            if (node.children) {
              findParent(node.children, nodeId, node.value)
            }
            continue
          }
        }
        return arr
      }
      return findParent(list, val)
    },
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ElementUI 中的城市级联选择器是一个非常常用的组件,可以帮助用户在一个区域选择省、市和区县。要使用城市级联选择器,你需要按照以下步骤进行设置: 1. 安装 ElementUI:首先确保你已经安装了 ElementUI,可以通过 npm 或者 yarn 进行安装。 2. 引入级联选择器组件:在你的项目中找到需要使用城市级联选择器的页面或组件,并在该页面或组件中引入级联选择器组件。在 Vue 文件中,可以使用 import 语句引入: ```javascript import { Cascader } from 'element-ui'; ``` 3. 使用级联选择器组件:在你的页面或组件中使用 Cascader 组件,并为其绑定相应的数据和事件处理方法。 ```html <template> <cascader :options="options" :props="props" v-model="selectedCity" @change="handleCityChange" ></cascader> </template> <script> export default { data() { return { options: [], // 城市数据源 props: { value: 'value', label: 'label', children: 'children', }, selectedCity: [], // 选中的城市 }; }, methods: { handleCityChange(value) { console.log('选中的城市:', value); }, }, }; </script> ``` 4. 加载城市数据源:在获取城市数据源的方法中,将数据源赋给 options 变量,以便级联选择器组件能够正确显示和选择城市。 ```javascript import cityData from './cityData'; // 城市数据源 // ... data() { return { options: cityData, // 城市数据源 // ... }; }, ``` 5. 自定义城市数据源:你可以根据需要自定义城市数据源,以适应你的项目要求。 以上是使用 ElementUI 的城市级联选择器的基本设置步骤。你可以根据自己的需求进行相应的样式和逻辑定制。希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值