vue3 element-plus el-cascader 单选点击只点击文字问题

原创已于 2024-06-14 09:53:53 修改 · 414 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

于 2024-06-12 18:03:07 首次发布

本文介绍了在Vue3中使用Element-Plus的Cascader组件时，如何处理单选模式下仅点击文字触发选择的解决方案。通过CSS样式调整，确保点击文字能够正确响应。

`
vue3中element-plus 联级单点问题

``
  <el-cascader
            placeholder="xxx"
            :options="options"
            v-model="shareScope"
            clearable
            collapse-tags
            :show-all-levels="false"
            size="small"
            ref="elcascader"
            :props="props"
            popper-class="cscaderS"
          >
            <template #default="{ data }">
              <!-- 这块必须是块级元素,顶满100%,否则过短的文字无法被点击到 -->
              <div @click="select(data)">
                {{ data.label }}
              </div>
            </template>
          </el-cascader>

import {
  reactive,
  toRefs,
  onMounted,
  computed,
  watch,
  markRaw,
  ref,
} from "vue";

 setup() {
    let router = useRouter();
    let store = useStore();
    let list = reactive({
   
      shareScope: [],
      props: {
        multiple: false,
        emitPath: false,
        //开启懒加载
        lazy: true,
        checkStrictly: true,
        lazyLoad: selDep,
      },
      countSum: 0,
      goValue: "",
      reIndex: "",
      shareScope: [], //值
      options: [
        // {
        //   value: "zhinan",
        //   label: "指南",
        // },
      ],
      key: 0,
    });
    function select(data) {
      list.shareScope = data.value;
    }
    function selDep(node, resolve) {
      let brand = null;
      if (node != undefined) {
        let { level } = node;
        if (node.value == undefined) {
          brand = "";
        } else {
          brand = node.value;
        }
        if (level < 2) {
          resolve();
        }
      } else {
        brand = "";
      }
      let time = new Date().getTime().toString();
      if (brand != "") {
        getDept({
          TIMESTAMP: time,
          VERIFICATION: md5(
            "" 
          ),
          EMPLID: "",
        }).then((res) => {
          if (res["ERROR_CODE"] == "20000") {
            // list.options = markRaw(res["EpEvalDeptInfo"]);
            let params = res["EpEvalDeptInfo"];
            params.forEach((item, index) => {
              if (item.children[0].label == "") {
                item.children = [];
              }
            });
            let result = null;
            result = params.map((item) => ({
              value: item.value,
              label: item.label,
              children: item.children,
            }));
            let options = result;

            let nodesChildren = null;
            options.forEach((item, index) => {
              // if ((item.children[0].label = "")) {
              //   item.children = [];
              // }
              let opt = item.children;
              if (opt != undefined) {
                nodesChildren = Array.from(opt).map((itemChild) => ({
                  value: itemChild.value,
                  label: itemChild.label,
                  children: itemChild.children,
                }));
              }
            });

            resolve(nodesChildren);
          }
        });
      }
    }

 

  
    // 获取父级数据
    function getDeptList(node, resolve) {
      console.log("key2:", list.key);

      let brand = null;
      if (node != undefined && node != null) {
        let { level } = node;
        brand = node[node.length - 1];
        if (level.length > 2) {
          resolve();
        }
      } else {
        brand = "";
      }
      let time = new Date().getTime().toString();
      getDept({
        TIMESTAMP: time,
        VERIFICATION: md5(
        
        ),
        EMPLID: "",
      
      }).then((res) => {
        if (res["ERROR_CODE"] == "20000") {
          list.options = markRaw(res["EpEvalDeptInfo"]);
          let params = res["EpEvalDeptInfo"];
          let result = null;
          result = params.map((item) => ({
            value: item.value,
            label: item.label,
            children: item.children,
          }));
          let options = result;
          let nodesChildren = null;
          options.forEach((item, index) => {
            let opt = item.children;
            if (opt != undefined) {
              nodesChildren = Array.from(opt).map((itemChild) => ({
                value: itemChild.value,
                label: itemChild.label,
                children: itemChild.children,
              }));
            }
          });

          // resolve(nodesChildren);
        }
      });
    }
  
 
     
  
  
      setTimeout(() => {
        if (FlowList.length > 0) {
          let time = new Date().getTime().toString();
          cheTxt({
            TIMESTAMP: time,
            VERIFICATION: md5(
          ""
            ),
            EMPLID: "",
       
            FlowList: FlowList,
          }).then((res) => {
            if (res["ERROR_CODE"] == "20000") {
              ElMessage({
                message: "提交成功",
                type: "success",
                offset: window.screen.height / 5,
              });
          
            } else {
              ElMessage({
                message: res["ERROR_MSG"],
                type: "error",
                offset: window.screen.height / 5,
                duration: 1000,
              });
            }
          });
        } else {
          ElMessage({
            message: "没有可提交项",
            type: "warning",
            offset: window.screen.height / 5,
          });
        }
      }, 100);
    }
  


 
  


    onMounted(() => {
      list.loading = false;
      list.key += 1;
      getDeptList();
    });

    return {
      ...toRefs(list),
      getDeptList,
      select,
    };
  },

css样式

.cscaderS .el-radio {
    display: none;
}

vue3 element-plus el-cascader 单选点击 只点击文字问题

vue3 element-plus el-cascader 单选点击只点击文字问题