elementui 框架使用过程一些细节

elementui 使用过程一些细节

1. 搜索框重置，没有清除问题

   是因为 prop="signatories" 没有设置或者设置与对应的输入框不一样导致

2. 弹窗必填提示不显示* 。

   一可能是没有设置 prop="reason"，二是设置与输入框不一致，三对应的如rules规则没有设置对应的值

3. 弹窗数据没有重新加载问题

   对话框增加一个 v-if="open" 即可

4. 数据深度拷贝方法

   参考链接:

5. 下载文件操作

   
                         消耗导入的文件必须是xls或xlsx格式，
                           点击下载
                         
                          
                         示例以帮助您顺利地完成导入
                       
   

   js代码

     excelTemplatesConsume() {
          this.$refs.downloadTemplateConsume.dispatchEvent(new MouseEvent('click'))
       },
   

   如果是链接的操作方法

    window.open(file[index].url, '_blank')
   window.open(
           "http://xxxxx.myqcloud.com/1650676904624.xlsx"
          );
   

6. 页面元素不固定实现

? 参考链接：

? 主要代码是这里

  .chy-test:last-of-type { //这个才是取同类最后一个 https://www.csdn.net/tags/NtjaYgxsMjAyNTMtYmxvZwO0O0OO0O0O.html
                     margin-right: calc(26% + 22% / 2);
                }
                .chy-test:nth-child(3n) { //第3个和3n元素的处理
                     margin-right: 0;
                }

7. 字符串拼接

   this.personList.forEach(item => {
             item.label = `${item.userName}(${item.account})`;
           });
   :ref="`user${index}`"
   

   参考：https://blog.csdn.net/w_t_y_y/article/details/107983413

8. 数据更新

   this.$nextTick(() => {        
             this.$set(this.$refs.chyEdit[this.tempData.index].goalForm.addQuotaDetailManageList, this.tempData.inIndex, this.formAttribute);
   
         })
   

9. 子组件刷新父组件 和父组件调用子组件方法

   子组件刷新父组件可以使用多层$parent，从而达到刷新或关闭或改变父级或顶级窗体相关属性

   当在子组件里更改了某些信息且关闭子组件后，需要父组件更新修改后的内容，该如何操作

   1、$emit触发

   　　父组件　　@add=“add(val)”

   　　子组件　　this.$emit('add', newVal)

   2、使用$parent触发

   　　父组件　　更新数据是由某个方法触发，如getList()

   　　子组件　　this.$parent.getList()

    this.$refs.commonForm.$children[0].saveToDb()//保存子组件数据
   

10. 自定义字段是数组或对象的注意的事项

    是数组设置

      props: {
        cluesList: {
          type: Array,
          default: ()=>[],
        },
      },
    

    是对象的设置

      props: {
          goalObject: {
          //每个目标信息
          type: Object,
          default: () => {},
        },
      },
    

11. 这个操作注意一下，看清楚，一个有return，一个没有，所以导致then数量不同

       handleRevokeTest(row) {
           let that=this;
           this.loading=true;
          //撤销内容
          this.$confirm("确认撤销此工单的申请吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }) .then(() => {
              new Promise((resolve,reject)=>{
                    resolve("执行")
                }).then((val)=>{
                   console.log(val,"valvalvalvalval")
                   this.loading=false;
                })
            })
            .catch(() => {
             this.loading = false;
            });
          console.log(this.loading,"this.loading")
    
        },
            
         openConfirm(roleId) {
          let that = this;
          this.$confirm("确认回收后，无法更改，确认已收到对应配件吗？", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(function () {
              return confirmAccessories(roleId);
            })
            .then(() => {
              that.msgSuccess("成功");
              that.getFormInfo();
              that.getDisposeRecordList();
            })
            .catch(function () {
              //this.msgSuccess("成功");
              //  this.loading = false;是否
            });
        },    
    

12. js两个数组方法 filter和find

    ES6 find() 方法返回通过测试函数的第一个元素的值。如果没有值满足测试函数，则返回 undefined。

    filter() 方法创建一个包含所有通过测试函数的元素的新数组。如果没有元素满足测试函数，则返回一个空数组。

          showStateText(value) {
          let tempData = this.stateOptions.filter((item) => item.id == value);
          return tempData &&tempData.length>0&& tempData[0].lable || '未知'
        },
          showUseObjText(value) {
          let tempData = this.useObjOptions.find((item) => item.id == value);
          return tempData && tempData.lable || '未知类型'
        },
    

    参考链接：https://blog.csdn.net/qfxietian/article/details/122219437

13. css 背景图片

     showBg(state) {
          let bgClass = '';
          if (state == '3') {
            bgClass = 'chy-bg-approved'
          }
          else if (state == '4') {
            bgClass = 'chy-bg-reject'
          }
          else if (state == '5') {
             bgClass = 'chy-bg-revoke'
          }
          else {
            bgClass = '';
          }
          return bgClass;
        }