elementui 框架使用过程一些细节

elementui 使用过程一些细节

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

          <el-form-item label="签约人" prop="signatories">
                <el-input v-model="queryParams.signatories" placeholder="签约人" clearable size="small"
                  @keyup.enter.native="handleQuery" style="width:240px" />
              </el-form-item>
    

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

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

    <el-form-item label="撤回原因" prop="reason">
                        <el-input v-model="withdrawalForm.reason"  type="textarea"  rows="5"  maxlength="200"
                          show-word-limit/>
                      </el-form-item>
    

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

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

    <!-- 添加或修改区域政策对话框 :fullscreen='true' -->
        <el-dialog
          :title="title"
          :visible.sync="open"
          v-if="open"
          width="1250px"
          append-to-body
          custom-class="chy-dialog"
        >
    

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

  4. 数据深度拷贝方法

    参考链接:https://www.cnblogs.com/juneling/p/9149969.html

  5. 下载文件操作

    <div style="width: 100%" v-if="upload.isConsume">
                          消耗导入的文件必须是xls或xlsx格式,<span
                            style="color: #409eff"
                            @click="excelTemplatesConsume"
                          >
                            点击下载
                          </span>
                          <a ref="downloadTemplateConsume" style="display: none" href="/excelTemplate/templatesConsume.xlsx"  target="_blank"> </a>
                          示例以帮助您顺利地完成导入
                        </div>
    

    js代码

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

    如果是链接的操作方法

     window.open(file[index].url, '_blank')
    window.open(
            "http://xxxxx.myqcloud.com/1650676904624.xlsx"
           );
    
  6. 页面元素不固定实现

​ 参考链接:https://www.cnblogs.com/xiaohuasan/p/16130317.html

​ 主要代码是这里

  .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;
                }
  1. 字符串拼接

      <template v-if="userList">
                  <div v-for="(item,index) in userList" :key="index">
                    {{item.userName+'('+item.userAccount+')'}}
                  </div>
     </template>
    
    <el-option
                    v-for="item in projectList"
                    :key="item.pNo"
                    :label='`${item.name}-${item.managerName}(${item.managerAccount})`'
                    :value="item.pNo"
                  >
                  </el-option>
    
    
    
    this.personList.forEach(item => {
              item.label = `${item.userName}(${item.account})`;
            });
    :ref="`user${index}`"
    

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

  2. 数据更新

    this.$nextTick(() => {        
              this.$set(this.$refs.chyEdit[this.tempData.index].goalForm.addQuotaDetailManageList, this.tempData.inIndex, this.formAttribute);
    
          })
    
  3. 子组件刷新父组件 和父组件调用子组件方法

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

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

    1、$emit触发

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

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

    2、使用$parent触发

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

      子组件  this.$parent.getList()

     this.$refs.commonForm.$children[0].saveToDb()//保存子组件数据
    
  4. 自定义字段是数组或对象的注意的事项

    是数组设置

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

    是对象的设置

      props: {
          goalObject: {
          //每个目标信息
          type: Object,
          default: () => {},
        },
      },
    
  5. 这个操作注意一下,看清楚,一个有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;是否
            });
        },    
    
  6. 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

  7. css 背景图片

     <div :class="showBg(state)">
    </div>
    
    <style scoped>
    .chy-bg-reject {
      background: url("~@/assets/chyimages/reject.png") no-repeat;
      background-position: 100% 0%;
      background-size: 200px 200px;
    }
    .chy-bg-revoke {
      background: url("~@/assets/chyimages/revoke.png") no-repeat;
      background-position: 100% 0%;
      background-size: 200px 200px;
    }
    
    .chy-bg-approved {
      background: url("~@/assets/chyimages/approved.png") no-repeat;
      background-position: 100% 0%;
      background-size: 200px 200px;
    }
    </style>
    
     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;
        }
    
posted @ 2022-05-30 16:50  剧里局外  阅读(34)  评论(0编辑  收藏  举报