What specific features does the element have in the latest version?

本文共计378个文字，预计阅读时间需要2分钟。

目录 + Element UI中El-cascader使用 + 示例 + 代码 + Element UI中El-cascader使用及自定义key名 + Element UI中El-cascader使用 + 想要实现进入页面直接选择选项器中的选项 + 示例 + 那v-model绑定的值必须是数组形式的！

目录

• element ui中el-cascader使用
• 例→
• 代码
• element中el-cascader使用及自定义key名

element ui中el-cascader使用

要想实现进入页面直接选中选择器中的选项

例→

那v-model绑定的值必须是数组形式的！！（element ui官方文档中没提到这一点好像，我也是试了很多次才发现的）

代码

<el-form-item label="分类:" prop="region" class="region"> <div class="block"> <el-cascader v-model="optionProps" //**重点** :options="myOptions2" :props="{ checkStrictly: true }" @change="handleChange" ></el-cascader> </div> </el-form-item>

element中el-cascader使用及自定义key名

下面展示一些 内联代码片。

el-cascader的通过改变值时，获取当前选中数据

根据接口返回数据，灵活定义key名

// template中的应用 options为数据 // 1.props="optionProps"：props是框架属性，optionProps为自定义data中的key //2. ref="cascaderAddr" 自定义 用来 @change事件取值用 <template> <el-cascader v-model="ruleForm.address" :options="options" :props="optionProps" clearable ref="cascaderAddr" @change="cascaderChange" ></el-cascader> </template>

//定义符合自己数据的key值 <script> data() { return { optionProps: { value: "code", label: "name", children: "children", }, } }, methods: { cascaderChange() { console.log( this.$refs["cascaderAddr"].getCheckedNodes()[0].pathLabels, "选择地址" ); // this.$refs["cascaderAddr"].getCheckedNodes()//完整的数据 //this.$refs["cascaderAddr"].getCheckedNodes()[0].pathLabels//value的值 }, } </script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。