修改ElementUI中el-cascader级联组件单选样式:点击文字选中且自动收起选择面板

先上效果图:
在这里插入图片描述
效果为:鼠标放到选择城市菜单上弹出下一级城市菜单,点击当前城市菜单则选中,并且选择面板消失。

1、全局样式修改,找到App.js加入以下样式代码:

/**
 *以下样式将单选框隐藏,并绝对定位与文字内容一样大小,这样点击时可以点击整行文字。
 */
<style lang="scss">
.el-cascader-panel .el-radio {
  width: 132px;
  height: 34px;
  line-height: 34px;
  padding: 0 10px;
  z-index: 10;
  position: absolute;
}
.el-cascader-panel .el-radio__input {
  visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
</style>

2、找到el-cascader组件使用的地方:

<template>
	<el-form :model="formValue">
		<el-form-item label="集团省市:">
			<el-cascader
			  ref="cascader"  // 必填
			  v-model="formValue.provinces"
			  placeholder="请选择"
			  :options="options"
			  :props="{ checkStrictly: true, expandTrigger: 'hover' }"  //必填
			  @change="cascaderChange"   //必填
			  clearable
			  filterable
			>
			</el-cascader>
		</el-form-item>
	</el-form>
</template>

<script>
export default {
  methods: {
    cascaderChange(values) {
      // 选择之后将下拉界面收起
      this.$refs.cascader.toggleDropDownVisible();
      // 还可以获取labels值
      const labels = this.$refs.cascader.getCheckedNodes()[0].pathLabels;
      console.log(values);   // ["11", "1101", "110101", __ob__: Observer]
      console.log(labels);   // ["北京市", "北京市", "东城区", __ob__: Observer]
    }
  }
};
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值