日常开发碰到的东西

 

报错Cannot create property 'type' on string ''

是因为 你定义的相关变量是字符串

 改成这样就行了

 vue报错Cannot set properties of undefined (setting ‘xxx‘)

是因为没获取到值，需要在方法外层定义变量等于this，然后在方法内使用变量.name去查找值；

方法返回值是一个promise对象-vue中返回结果是promise的处理方式-vue打印方法的返回值是一个Promise

 async getFileNameRepeatStatus(id, name) {
      let status=false;
      await this.$http({
        method: "POST",
        url: "/cbrc/work/file/checkFile",
        data: { customFileName: name, id: id }
      }).then(res => {

        const { data, code } = res.data;
        if (code == 200) {
          if (data.length > 0) {
            status= true;
          }
        }
      });
      return status;
    },

打印

        console.log('this.getFileNameRepeatStatus("", this.fileName) :>> ',this.getFileNameRepeatStatus("", this.fileName));

返回值竟然是个promise对象 

 解决方法是加await，等待函数执行完毕再打印

        console.log('this.getFileNameRepeatStatus("", this.fileName) :>> ',await this.getFileNameRepeatStatus("", this.fileName));

成功 

vue在data中使用定义的其他data的值-vue的data中使用data的值

data() {
    return {
      
      loginRole: JSON.parse(sessionStorage.getItem("loginUl")),

}
}

如上图，我们要使用loginRole对象里的orgId。写法如下是肯定不行的：

data() {
const that = this;
    return {
      
      loginRole: JSON.parse(sessionStorage.getItem("loginUl")),
orgId:that.loginRole,

}
}

还真不能这样写，建议换成别的方法

const loginRole= JSON.parse(sessionStorage.getItem("loginUl"));
export default {


data() {

    return {
      
    
orgId:loginRole.orgId,

}
}




}

我们时常要对时间的时分秒进行补零操作

let time=1;//获取到的时分秒
if(time<10)time='0'+time;//第一种
if(time<10)time.padStart(2,0);//第二种

vue局部高亮插件：driver.js

vue的watch监听原理

使用elementUI的tab切换实现定制化，达到产品想要的效果

其实就相当于轮播图

每次都把filterList的值清空，数组里只存一条值，通过左右切换按钮来给filterList重新赋值，左右切换把真正列表的数据相应的下标拿到filterList里，如果切换到了数据尽头，就把数据里的第一条给到filterList

。。。。我改主意了

现在尝试使用elementUi的走马灯完成效果

 <!-- 切换完走马灯，会把两个下标统统给到,然后获取到list[index].childList[valIndex],
                        给最开始获取列表时默认list[index].childList[0]数据的list[index].filterList赋新值, -->
                      <!-- setContentInfo(valIndex,index) -->
                      <el-carousel
                        trigger="click"
                        height="150px"
                        indicator-position="none"
                        :autoplay="false"
                        arrow="always"
                        @change="setContentInfo(valIndex)"
                      >
                        <el-carousel-item v-for="item in [{a:1,b:2},{b:3,a:4}]" :key="item.a">
                          <h4>{{ item }}</h4>
                        </el-carousel-item>
                      </el-carousel>

 切换

如果对象里包含相应的键名就删除

 query.forEach(item => {

        if ("isVisible" in item) delete item.isVisible;

      });

需求实现-重命名删除上移下移移动到顶部等

  

  
  <div
          v-for="(item, index) of modelList"
          :key="item.propertyName"
          style="height:auto;"
        >
          <template v-if="item.flag !== 1">
            {{ item.propertyName }}
            <el-popover
              :ref="`node-popover-adjust-${item.id}`"
              placement="right"
              v-model="item.isVisible"
            >
              <p @click="setNewName = true" class="text-style">
                重命名
              </p>
              <template v-if="setNewName">
                <el-input
                  v-model="newName"
                  placeholder="请输入新报告模块名称"
                  clearable
                /><span
                  class="buttonStyle save"
                  @click="saveNewName(item, index)"
                  title="保存"
                ></span>
              </template>
              <p @click="setIt('删除', index)" class="text-style">
                删除
              </p>
              <p @click="setIt('上移', index)" class="text-style">
                上移
              </p>
              <p @click="setIt('下移', index)" class="text-style">
                下移
              </p>
              <p @click="setIt('移动到顶部', index)" class="text-style">
                移动到顶部
              </p>
              <p @click="setIt('移动到底部', index)" class="text-style">
                移动到底部
              </p>
              <span class="setting" slot="reference" title="设置"></span>
            </el-popover>
          </template>
        </div>













 // 重命名
    saveNewName(item, index) {
      this.modelList[index].propertyName = this.newName;
      this.newName = "";
      this.setNewName = false;
    },
    setIt(type, index) {
      switch (type) {
        case "删除":
          this.modelList[index].flag = 1;
          break;
        case "上移":
          [this.modelList[index], this.modelList[index - 1]] = [
            this.modelList[index - 1],
            this.modelList[index]
          ];
          this.modelList[index - 1].isVisible = false;
          this.$forceUpdate();
          break;
        case "下移":
          [this.modelList[index], this.modelList[index + 1]] = [
            this.modelList[index + 1],
            this.modelList[index]
          ];
          this.modelList[index + 1].isVisible = false;
          this.$forceUpdate();
          break;
      case "移动到顶部":
          this.modelList.unshift(this.modelList[index]);
          this.modelList.splice(index+1,1);
          this.modelList[0].isVisible = false;
          console.log(" this.modelList :>> ", this.modelList);
          this.$forceUpdate();
          break;
        case "移动到底部":
          this.modelList.push(this.modelList[index]);
          this.modelList.splice(index,1);
          this.modelList[[this.modelList.length - 1]].isVisible = false;
          this.$forceUpdate();
          break;
        case "替换到顶部":
          [this.modelList[index], this.modelList[0]] = [
            this.modelList[0],
            this.modelList[index]
          ];
          this.modelList[0].isVisible = false;
          console.log(' this.modelList :>> ',  this.modelList);
          this.$forceUpdate();
          break;
        case "替换到底部":
          [this.modelList[index], this.modelList[this.modelList.length - 1]] = [
            this.modelList[this.modelList.length - 1],
            this.modelList[index]
          ];
          this.modelList[[this.modelList.length - 1]].isVisible = false;
          this.$forceUpdate();
          break;
      }
    },

解构赋值

 const {code, data} = res.data.data;

上方代码等于

 const code = res.data.data.code,data=res.data.data.data;

使用$set修改对象的值

 this.$set(
        this.reportList[parentIndex],
        "filterInfo",
        this.reportList[parentIndex].labels[valIndex].value
      );

 element-ui input如何在@change事件中保留默认参数情况下传入自定义参数

                        @change="val => setContentInfo(val, index)"