vue+element级联选择器(选择任意一级选项)

最新推荐文章于 2024-10-29 09:11:30 发布

srz1128

最新推荐文章于 2024-10-29 09:11:30 发布

阅读量5.8k

点赞数 1

文章标签： vue java vue.js

本文链接：https://blog.csdn.net/srz1128/article/details/107857020

版权

本文展示了如何在Vue+Element框架下实现级联选择器，通过添加v-if判断处理添加和修改场景。详细介绍了初始化加载数据、异步填充options及findidfromArray方法用于确定用户选择的子类。在后台，使用SpringCloud框架进行服务调用，提供了添加时的数据处理逻辑。

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

页面效果

页面代码：

<el-form-item v-if="!splmData.id ? 'splmData.id' : null" label="父级分类：" prop="parentId">
          <el-cascader v-model="parentId" :options="parentData" :props="optionProps" 
          clearable></el-cascader>
</el-form-item>

添加v-if 判断是为了在添加中显示，而修改时隐藏，由于第一次学习写vue，只能使用比较笨的方式

下面实现步骤

export default {
  name: "ProductSplm",
  data() {
    return {
      parentData: [],
      parentId: "",
      optionProps: {
        value: "id",
        label: "name",
        children: "children",
        checkStrictly: true