vue开发：Cascader 级联选择器开启多选的时候，最后一级点击任何地方都能勾选

在开发Cascader 级联选择器的时候，要求最后一级将点击范围扩大。

先看一下官网的效果，必须要点击复选框才能选中：

最后一级更改了css：

    /* 将三级面板的文字设置成可点击，如果只有两级或多级，只要将nth-child改成需要的那一级，如 nth-child(2) */
    /* 将三级面板的文字设置成可点击 */
    .el-cascader-menu:nth-child(3) .el-cascader-menu__wrap .el-checkbox {
      position: absolute;
      z-index: 1;
      width: 100%;
      left: 0;
      padding-left: 20px;
      box-sizing: border-box;
    }
    /* 控制复选框和文字的距离 */
    .el-cascader-menu:nth-child(3) .el-cascader-node__label {
      padding-left: 25px;
    }

更改后的效果：

完整代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>vue开发：Cascader 级联选择器开启多选的时候，最后一级点击任何地方都能勾选</title>
  <!--引入 element-ui 的样式，-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <!-- 引入element 的组件库-->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #app {
      padding: 50px;
    }

    /* 将三级面板的文字设置成可点击 */
    .el-cascader-menu:nth-child(3) .el-cascader-menu__wrap .el-checkbox {
      position: absolute;
      z-index: 1;
      width: 100%;
      left: 0;
      padding-left: 20px;
      box-sizing: border-box;
    }
    /* 控制复选框和文字的距离 */
    .el-cascader-menu:nth-child(3) .el-cascader-node__label {
      padding-left: 25px;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-cascader :options="options" :props="props" collapse-tags clearable></el-cascader>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          props: { multiple: true },
          options: [{
            value: 1,
            label: '东南',
            children: [{
              value: 2,
              label: '上海',
              children: [
                { value: 3, label: '普陀' },
                { value: 4, label: '黄埔' },
                { value: 5, label: '徐汇' }
              ]
            }, {
              value: 7,
              label: '江苏',
              children: [
                { value: 8, label: '南京' },
                { value: 9, label: '苏州' },
                { value: 10, label: '无锡' }
              ]
            }, {
              value: 12,
              label: '浙江',
              children: [
                { value: 13, label: '杭州' },
                { value: 14, label: '宁波' },
                { value: 15, label: '嘉兴' }
              ]
            }]
          }, {
            value: 17,
            label: '西北',
            children: [{
              value: 18,
              label: '陕西',
              children: [
                { value: 19, label: '西安' },
                { value: 20, label: '延安' }
              ]
            }, {
              value: 21,
              label: '新疆维吾尔族自治区',
              children: [
                { value: 22, label: '乌鲁木齐' },
                { value: 23, label: '克拉玛依' }
              ]
            }]
          }]

        }
      },
      created() {

      },
      methods: {

      },
    })
  </script>
</body>

</html>

vue开发：Cascader 级联选择器开启多选的时候，最后一级点击任何地方都能勾选

我的一个道姑朋友

引用和评论

微信小程序:修改对象数组中的某个元素

Vue.js-Vue实例

你可能不知道的图片加载相关知识

更强大、更灵活！ defineModel 重新定义双向绑定

使用CSS给标题添加书名号并超出省略

Base64编码的“暗坑”：解密失败？可能是这些原因！

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！