iview组件Select使用与回显

数据库存入的是数字，select菜单根据数字显示文字，并且对字段进行改查以及回显

1、编辑页面

<i-select v-model="edit.type" style="width:100%">
   <i-option v-for="item in typeList" :key="item.value" :value="item.value">{{ item.label }}</i-option>
</i-select>

export default {
    data() {
      return {
        typeList: [
          {
            value: '1',
            label: '数据采集'
          },
          {
            value: '2',
            label: '数据生产'
          },
          {
            value: '3',
            label: '综合项目'
          },
          {
            value: '4',
            label: '外包项目'
          },
          {
            value: '5',
            label: '其他项目'
          }
        ]
      }
   }
}

写到此处便可添加修改数据，然后进行回显

 在列表页面展开编辑页面时，对数据进行处理，edit.type为数字时不会默认显示，需要将数字转换为字符串

列表页面中添加编辑模态框组件，其他功能自己实现，这里只对edit.type进行处理

<Edit ref="edit" :model="edit" @on-update="handleGetList"></Edit>

import Edit from './ProjectEdit'

export default {
    name: 'Project',
    components: {
      Edit
    }
    // ...
}

      /**
       * 展开编辑界面
       * @param  {object} row 当前行数据
       */
      handleEdit(row) {
        // 编辑页模态框显示
        this.$refs['edit'].showModal('edit')
        // 模拟异步请求(获取详情)
        setTimeout(() => {
          // edit为当前行数据
          let edit = Object.assign({}, row)
          // 项目类型回显
          if (edit.type) {
            edit.type = edit.type.toString()
          }
          // 日期回显
          if (edit.planStartData) {
            edit.planStartData = new Date(edit.planStartData)
          }
          this.edit = {
            ...edit
          }
          this.$refs['edit'].getPatch() // 获取补丁数据
        }, 800)
      },

3、回显之后在点击显示添加模态框时(添加与修改是同一页面，只是绑定的数据不同)将回显的数据置空，在列表页添加

mounted() {
   this.init = Object.assign({}, this.edit) // 复制初始表单数据
   this.handleGetList() // 获取列表数据
}

methods: {
      // 显示新增模态框
      handleCreate() {
        // 初始化绑定数据，相当于置空
        this.edit = Object.assign({}, this.init)
        this.$refs['edit'].showModal() // 显示模态框
        this.$refs['edit'].getPatch() // 获取补丁数据
      }
}