ElementUIのel-cascade rカスケードコンポーネントのラジオスタイルを変更するには、テキストをクリックして選択パネルを自動的に閉じます.

先に効果図を上へ:効果は:マウスを置いて都市を選択するメニューの上で次のレベルの都市のメニューを弾き出して、現在の都市のメニューをクリックして選択して、そして選択パネルは消えます.
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>