element-ui Cascader选择标签 自定义选择弹出层

实现效果：

 

实现思路：给<el-cascader>添加类名：.cascader-input并添加禁止点击：pointer-events: none;

在<el-cascader>外层添加div并设置允许点击：pointer-events: all; 

然后设置点击事件即可。

具体实现主要部分：

CSS：

.cascader-input{
        width: 200px !important;
        pointer-events: none;
    }
    .el-cascader__tags .el-tag__close, .tag-input{
        display: inline-block;
        pointer-events: all;
        cursor: pointer;
    }
    .tag-input .el-input__suffix-inner{
      pointer-events: none !important;
    }
    /* 标签样式 */
    .tag-list .tag-item{
        display: inline-block;
        margin-right: 10px;
        padding: 5px 10px;
        background: #eee;
        color: #333;
        border-radius: 2px;
        cursor: pointer;
        font-size: 12px;
    }
    .tag-list .tag-item.on{
      color: #fff;
      background: #409EFF;
    }

HTML：

<div class="tag-input" @click="openselectTagDialog('','',true)">
  <el-cascader
      style="margin-right: 10px;"
      placeholder="修改全部标签"
      class="cascader-input"
      :options="optionsTag"
      :props="defaultParamsTag"
      @change="adTagChange"
      collapse-tags
      clearable></el-cascader>
</div>
   <!-- 标签选择模态框 -->
    <el-dialog title="选择标签" :visible.sync="selectTagDialog">
      <div class="tag-list">
          <div class="tag-item" :class="{on: tagSelected.includes(item.id)}" v-for="(item, index) in optionsTag" :key="index" @click="selectTagHandler(item.id)">
              {{ item.labelName }}
          </div>
      </div>

      <div slot="footer" class="dialog-footer">
          <el-button @click="selectTagDialog = false">取 消</el-button>
          <el-button type="primary" @click="handleTagChange()">确 定</el-button>
      </div>
  </el-dialog>

JS：

// 标签选择事件
selectTagHandler(val) {
    let key = this.tagSelected.indexOf(val)
    if (key != -1) {
        this.tagSelected.splice(key, 1)
    } else {
        this.tagSelected.push(val)
    }
},