elementui 框架使用过程一些细节

elementui 使用过程一些细节

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

      <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" 没有设置或者设置与对应的输入框不一样导致

弹窗必填提示不显示* 。

<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规则没有设置对应的值

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

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

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

数据深度拷贝方法

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

下载文件操作

<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"
       );

页面元素不固定实现

参考链接：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;
                }

字符串拼接

  <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

数据更新

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

      })

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

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

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

1、$emit触发

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

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

2、使用$parent触发

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

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

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

是数组设置

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

是对象的设置

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

这个操作注意一下，看清楚，一个有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;是否
        });
    },

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

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 剧里局外阅读(63) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

剧里局外

elementui 框架使用过程一些细节

elementui 使用过程一些细节

公告