iview组件Select使用与回显

Dear 丶 2022-02-19 14:43 1991阅读 0赞

数据库存入的是数字，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() // 获取补丁数据
          }
    }