el-cascader 级联选择器取消radio按钮，实现点击label选中

级联选择器取消radio按钮，实现点击label选中

首先在App.vue中加入全局样式，如果在单个组件加入样式无效

.el-cascader-panel .el-radio{
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  right: 10px;
}
.el-cascader-panel .el-radio__input{
  visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}

在表单中使用级联
:show-all-levels=“false” 输入框中是否显示选中值的完整路径

<el-form-item label="单位分类：" prop="erpSupplier.classificationId">
	<el-cascader
		v-model="editUnitForm.erpSupplier.classificationId"
		:options="typeDataOptions"
		:props="classificationIdProps"
		:show-all-levels="false"  
		ref="cascader"
		clearable
		@change="editUnitFormHandleChange">
	</el-cascader>
</el-form-item>

级联属性

classificationIdProps: {
	expandTrigger: 'hover',//鼠标移入展开
	value: 'classificationId',
	label: 'directoryName',
	children: 'list',
	checkStrictly: true //父级是否可选中 
},

如果级联是省市区级联，获取三级id以及label值的方法

<el-cascader
	v-model="addUnitForm.erpSupplier.addressPrefix"
	:options="options"
	ref="cascaderAddr"
	:props="cascaderProp"
	@change="addressHandleChange" 
	style="width: 100%"
	clearable
></el-cascader>

// 获取省市区地址级联
addressHandleChange(e, form, thsAreaCode) {
	//省市区的id
	console.log(this.$refs['cascaderAddr'].getCheckedNodes()[0].path)
	this.addUnitForm.erpSupplier.addressPrefix=this.$refs['cascaderAddr'].getCheckedNodes()[0].path;
	// 获取label值
	thsAreaCode = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels;
	console.log(thsAreaCode) 
	this.city = thsAreaCode[0] + thsAreaCode[1] + thsAreaCode[2];
    },