ElementUi级联选择器选择的数据渲染在div中

原创

已于 2022-04-22 10:04:35 修改 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

于 2022-04-22 09:57:58 首次发布

本文介绍如何使用Vue的el-cascader组件处理多层级数据，通过递归方法将多选的二维数组转换为div中的显示格式。适合学习级联选择器和数据处理的开发者。

级联选择器选择的数据渲染在div中

需求：将选择的数据渲染在div中展示。
思路：当多选的时候是一个二维数组，单选时是一维数组，区分处理，不确定有多少层级，用递归实现，把拿到的数据放到数组里，然后处理成自己要的。``

<template>
  <div>
    <el-cascader
      v-model="value"
      :options="options"
      @change="handleChange"
      :props="props"
    ></el-cascader>
    <div>{
   
   {
   
    this.deepCascader(this.options,this.value) }}</div>
  </div>
</template>
<script>
export default {
   
   
  data() {
   
   
    return {
   
   
      props: {
   
   
        // emitPath: false,
        multiple: true,
      }