【关于基本管理系统，新增下拉框的一些问题总结】

最新推荐文章于 2022-08-26 16:29:18 发布

叶舒华（程序媛版

最新推荐文章于 2022-08-26 16:29:18 发布

阅读量267

点赞数

文章标签： javascript vue

本文链接：https://blog.csdn.net/JJRH0618/article/details/124097809

版权

元数据前端开发禁用状态交互逻辑表单管理

关键词由CSDN通过智能技术生成

关于基本管理系统，新增下拉框的一些问题总结

在这里新增插入图片描述
1.选择元数据，后台返回相应的元数据字段和表字段


```javascript
 changeMetaData(value, item) {
      console.log(value)
      item.metadataTableColumnName = this.Mdfields.find(
        (target) => target.metadataColumnId === value
      ).metadataTableColumnName//获取元数据字段内容
        this.dsList.map((i) => {
            if(this.form.itemData.find(ele=>ele.metadataTableColumnName== i.metadataTableColumnName)){
              i.disabled = true
            }else{
              i.disabled = false
            }
            return i
        })//选择过的禁用

},


2.选择过的点击删除，此条元数据字段解除禁用

```javascript
 deleteData(index,i) {
      this.form.itemData.splice(index, 1)
      this.dsList.map((i) => {
            if( this.form.itemData.find(ele=> ele.metadataTableColumnName == i.metadataTableColumnName)){
              i.disabled = true
            }else{
              i.disabled = false
            }
            return i
        })
},

3.点击×或者取消页面清空（包括下面元数据字段下拉框的内容）

 this.addForm.metadataId = ''''

4.切换元数据，元数据字段清空

this.form.itemData = [
        {
          metadataColumnId: '',
          metadataTableColumnName: ''
        }
      ]

5.元数据字段增加完之后，添加字段禁用

if (this.dsList.length == this.form.itemData.length + 1) {
        this.form.itemData.unshift({//unshift从前面添加数组
          metadataColumnId: '',
          metadataTableColumnName: ''
        })
        this.outOfMetaData = true
      } else {
        this.outOfMetaData = false
        this.form.itemData.unshift({
          metadataColumnId: '',
          metadataTableColumnName: ''
        })
      }