级联选择+select+checkbox器

最新推荐文章于 2024-02-17 10:40:51 发布

原创

最新推荐文章于 2024-02-17 10:40:51 发布 · 864 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #less #javascript #前端

因为需求原因element和antd都不包含一级单选。二级多选选择器的选择器，该组件引用了antd的一切icon、card和checkbox组件，如果你用的是element 请替换<a-。不能复制直接用的代码都是垃圾，废话少说直接上代码。

<template>
  <!-- 折叠下拉面板 -->
  <div ref="main">
    <div class="input-box" @click="handleChangeAddress" ref="barparent">
      <div v-for="(item,indx) in dataList" class="laber-box" :key="indx">
        <span>{
  
  {item}}</span>
        <a-icon type="close" class="delete" @click="hedeleDate(item)" />
      </div>
    </div>
    <div class="card-conter" :style="{width:parentClientWidth+'px'}">
      <div class="card-box" v-if="isshow">
        <a-card style="width: 50%">
          <p class="item" v-for="(item,index) in children" :key="index" :class="{'active':active===index}" @click="headleList(item,index)">
            <span>{
  
  {item.label}}</span>
            <a-icon type="right" class="po-right" />
          </p>
        </a-card>
        <a-card style="width: 50%" v-show="childrenDate.length!==0">
          <a-checkbox-group v-model="changeDate.displayRule" @change="onChange">
            <a-row>
              <a-col class="item" :span="24" v-for="(item,index) in childrenDate" :ke