element-ui中的级联选择器Cascader点击区域太小的问题

布满荆棘的人生 2021-07-25 14:39 1208阅读 1赞

# 级联选择器 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
需要将上面的点击区域改为整个一行或者点击文字，我是改为点击文字可以选中：  
代码如下：

<el-cascader v-model="shelfSelect" size="mini" :show-all-levels="false" // 是否展示完整路径
                 clearable  //可清空
                 filterable //可搜索
                 placeholder="全部货架"
                 v-bind:options="shelfOptions" //绑定的数据，这个是有格式要求的
                 v-bind:props="{ expandTrigger: 'hover',checkStrictly: true }"> //级联菜单之间的关系
        <template slot-scope="{ node, data }"> //slot 自定义备选项的节点内容，参数为{node,data}，分别为当前节点的node对象和数据
            <i v-if="data.children" class="el-icon-map-location"></i> 
            <i v-else class="el-icon-notebook-2"></i>
            <span v-on:click="clickData(node)">{ {  data.label }}</span> //为了能够点击文字实现选中展示，给文字添加click事件
        </template>
    </el-cascader>

options中的数据格式是：  
![在这里插入图片描述][20210329092932311.png]  
label 文字，value:数值，children:子类，子类的格式也是如此：

点击事件函数如下：

clickData(node) { 
        this.shelfSelect = node.path;
    },

因为点击事件是需要绑定在slot中，自定义的slot中有两个参数;node data，通过控制台打印，发现node中的path是选中元素的value的数组集合，正好跟级联选择器中的v-model绑定的内容格式一致。直接给其赋值即可。

完成！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/a4ddc3193bdc46a89ab51c321d7f86d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/426d76802e134dfba3cdffe052c44903.png
[20210329092932311.png]: /images/20210725/ea3bee02e14547349b761a6141c4f727.png