element-ui中做select二连@change时遇到的问题（:model差异，整行row赋值导致自我设定值时不生效）

一、:model和v-model是不一样的

1. v-model
v-model是vue.js内置的双向数据绑定，只用于表单控件标签，如input、textarea ；例：直接对input做双向数据绑定。

 <input type="text" v-model="msg">
// 此时实现了input的双向数据绑定，改变input框内的值，msg也会改变(msg定义在data中)

2. :model
:model是v-bind:model的缩写，v-bind是一个动态绑定指令，并未实现数据的双向绑定（引用类型除外）。

<input type="text" :model="msg" >
// 此时改变input的值，msg不会发生变化，:model="msg"只是通过v-bind指令，将msg的值赋给了这个input，这里的:model的model可以是任意变量名，下面的:mydata="msg"实现的效果和:model一样，同时用到了v-bind指令。
<input type="text" :mydata="msg"/>

二、:model绑定的一些问题

组件绑定

<my-form
            label-width="100px"
            size="small"
            ref="mdInfo"
            :footer="null"
            :model="mdInfo"  
           
            :dictMap="dictmaps"
            :rules="rules"
            @change="handleChangeMdInfo"
            @submit="handleSubmitMdInfo"
          >

默认设置

const defaultModel = {
    modelName: '',
    modelCode: '',
    field: '',
    subfield: '',
    industry: '',
    modelType: '',
    source: 'qnkj',
    version: '',
    state: '1',
    createBy: 'Demo',
    updateBy: 'Demo',
    described: ''
  }




data () {
      return {
        mdInfo: Object.assign({}, defaultModel)
      }
    }

change事件
！！！因为给this.mdInfo中的数据直接设定值的时候，会初始化，所以，这里需要一个form中的change事件，每次都要给它赋予当前的表单的info

handleChangeMdInfo (info) {
        // console.log('handleChangeMdInfo', info.modelType);
        this.modelType = info.modelType
        info.field = this.flag
        if (info.modelType === 'standard' && info.field !== '') {
          this.mdInfo = Object.assign({}, info)
          // console.log('handleChangeMdInfo', info)
          this.mdInfo.modelName = this.dicts.field[info.field]
        }
      },

把选择器的选中的值给到一个flag，然后通过flag给到上面表单的info中，一次性重新全部赋予到this.mdInfo

这里的findIndex()，查出当前的值，然后根据另一个缓存数组对象查出需要的值

allChangeField(val) {

        // console.log('allChangeField', this.mdInfo);
        const index = this.field.findIndex(item => item.basisCode === val)
        // console.log('handleChangeField', this.field.findIndex(item => item.basisCode === val))
        // console.log(this.field[index].id)
        const parentId = this.field[index].id
        const data = { limit: 100, page: 1, params: {parentId} }
        this.fetchDict({ data: data }).then(res => {
          this.subfield = res.list
        })

      },
      handleChangeField(val) {
        // console.log('handleChangeField', val);
        // this.mdInfo.field = val
        this.flag = val
        this.mdInfo.subfield = ''
        this.allChangeField(val)
      },

当前行的数据row整个和单个赋予到data的info中，会有差异

整个赋予的时候，会让this.editInfo中的直接设定值不生效

handleCommand (handle, row) {

        if (handle.view) this.$router.push('/model/physic/show?id=' + row.id)
        if (handle.change) {
          // console.log('change', row);
          // this.editInfo = row
          this.editInfo.subfield = row.subfield
          this.editInfo.field = row.field
          this.editInfo.modelType = row.modelType
          this.editInfo.modelCode = row.modelCode
          this.editInfo.modelName = row.modelName
          this.editInfo.industry = row.industry
          this.editInfo.described = row.described
          this.editInfo.source = row.source
          // console.log('change===this.mdInfo.', this.mdInfo);
          if(row.modelType === 'standard') this.modelType = row.modelType
          const index = this.field.findIndex(item => item.basisCode === row.field)
          const parentId = this.field[index].id
          const data = { limit: 100, page: 1, params: {parentId} }
          this.fetchDict({ data: data }).then(res => {
              this.subfield = res.list
          })
          this.postVisible = true
        }

vue 双向数据绑定（ v-model和:model的区别 ）