el-cascader自定义节点内容一级二级加不同的标签

程序媛_MISS_zhang_0110

已于 2024-01-04 17:50:24 修改

阅读量2.7k

点赞数

分类专栏： element-ui 文章标签： vue.js elementui vue

于 2022-05-05 18:02:40 首次发布

本文链接：https://blog.csdn.net/MISS_zhang_0110/article/details/124594361

版权

element-ui 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

这篇博客展示了如何在Element UI的el-cascader组件中实现自定义节点内容，分别展示一级和二级选项的不同标签。通过调整模板插槽，将数据的`name`和`label`属性结合展示，为非叶子节点添加特殊标识。

摘要由CSDN通过智能技术生成

一、效果图

在这里插入图片描述

二、主要代码

 <el-form-item label="办事处:" prop="officeNameArr">
      <el-cascader 
      :options="options"
      :props="{ multiple: true}"
      :style="'width:'+this.$store.state.FormInputWidth.elFormItemWidth+'px'"
      v-model="newUsersForm.officeNameArr"
      size='small'
      collapse-tags
      clearable
      :show-all-levels="false"
      >
        <template slot-scope="{ node, data }">
          <span>{{ data.name }}-{{ data.label }}</span>
          <span v-if="!node.isLeaf"> </span>
        </template>
      </el-cascader>
    </el-form-item>