若依 ruoyi VUE el-select 直接获取选择option 的 label和value

1、最新在研究若依这个项目，我使用的是前后端分离的方案，RuoYi-Vue-fast(后端)+ RuoYi-Vue-->ruoyi-ui(前端)。RuoYi-Vue-fast是单应用版本没有区分那么多的modules 自己开发起来很方便，这个项目运行起来很方便，但是需要自定义的时候，因为我不懂前端，所以遇到很多问题。之后我会把遇到的问题都放在这个文章里面。记录一下。

2、先记录一下VUE页面的一个小修改，实现的功能就是在列表页面，点击新增，弹出的页面可以填写所有信息，新增到数据库。点击数据后面的修改，指定的字段不可编辑，不可用。

我想要实现的效果其实就是在列表里面对关键信息进行打码，这个打码需要从查询数据库或者后端进行数据打码，放在前端打码，抓一下网络请求就可以看到这个要注意。

用户点击数据后面的修改，关键信息就不可编辑，只能编辑其他信息。

这块也需要注意一下，当点击确定的时候，不可编辑的字段会带着星号传递到后台，注意将带星号的字段设置为null，避免修改到数据内真实数据。

实现这个功能很简单，代码如下

 <el-form-item label="xxx" prop="xxxx"><el-input v-model="form.xxx" placeholder="请输入xxx" :readonly="!isEditable" :disabled="!isEditable" /></el-form-item>

需要定义一个isEditable，当点击新增时候设置为false，当点击修改的时候设置为true

 /** 新增按钮操作 */handleAdd() {other-code--------------------this.isEditable = true;},/** 修改按钮操作 */handleUpdate(row) {other-code--------------------this.isEditable = true;},

不太懂VUE，只是按着自己想法来做，确实实现了功能，如果有其他更好的方法，欢迎大家指导。

3、VUE el-select 使用 ref 直接获取选中的 option对象，然后直接获取label和value

<el-select v-model="form.xxx" ref="optionRef" placeholder="请选择xxx" @change="handleChange"><el-option label="xxxxx" value="1"></el-option><el-option label="xxxx" value="2"></el-option><el-option label="xxxx" value="3"></el-option>
</el-select>handleChange(){this.form.xxx=this.form.xxx;this.form.xxxlabel= this.$refs.optionRef.getOption(this.form.xxx).label; },

这里面插一句，如果你想把某个页面中的表格内容做成select，只需要抓取一下这个页面的返回值，然后拿到返回值之后，交给AI，让AI自动处理，返回带有标签的代码就可以了。我就是通过这种方法将一个页面的表格做成了我想要的select，还可以根据你的需要排序分类什么的。巨好用。

ref这种方式也是我查询到的，实现了我想要的功能，如果有更好的方法，欢迎大家指导。