解决element UI下拉选择框当value没有在option里没有时展示label

element UI下拉选择框当value没有在option里没有时展示name

遇到一个奇怪的问题，这是一个下拉选择框，然后后台给了option里的数据和这个选框的默认值，但是这个默认值value在下面的选框数据里不存在，在element UI里它就直接显示value了，问题就来了，用户是看不懂id的，所以要解决

刚开始的时候，我是想在拿到数据的时候，直接将label的值赋给value，这样就会在页面显示文字了，但是后台说这个value是有用的，这就难了。。。

于是，&&闪闪的vue自定义指令就登场啦，哈哈哈。官方文档

//新建一个js文件，在里面写自定义指令，下次再写文章介绍自定义指令，哈哈哈哈
const Label = {
  bind(el, binding,datas){
    console.log(el.value,'=========================')
    setTimeout(()=>{
      el.children[0].children[0].value = datas.componentOptions.propsData.name
    },100)
  },
  componentUpdated(el, binding,datas){
    // console.log('componentUpdated','=========================')
    el.children[0].children[0].value = datas.componentOptions.propsData.name
  }
}

const install = function(Vue) {
  Vue.directive('label', Label)
}
if (window.Vue) {
  window.Label = Label
  Vue.use(install); // eslint-disable-line
}

Label.install = install
export default Label





main.js中引用
import directiveLabel from './directive/label'
Vue.use(directiveLabel)



页面直接v-label就可以啦

最后，这里可能有一个小坑就是在赋值的时候，要小心，因为赋值的是时候比较快，在接口请求回来之前就赋值了，所以要加一个延迟setTimeout就好了。