vue+ElementUI遇到的问题

1. form表单的布局

可以通过<el-row> <el-col :span(默认是将整个屏幕分成24)> 标签来改变格局;还可以通过<div>里面的style标签(margn-xx[左,右]) 来改变布局 align 选择居中靠右还是靠左 ;

2. table表格内文字过多自动换行显示不雅观

在<el-table>标签内使用

:show-overflow-tooltip="true"

就可以鼠标放在内容哪里就自动显示全部内容但是如果内容过多的话会铺满全屏,在<style>标签内加上

<style>
.el-tooltip__popper {
max-width: 20%;
}
.el-tooltip__popper,
.el-tooltip__popper.is-dark {
background: rgb(48, 65, 86) !important;
color: #fff !important;
line-height: 24px;
}
</style>

会比较好看些

3. 关于:model 和v-model form表单使用:model 如果不使用的话 rules输入框就算输入文字 还是会有提示信息,

4. 关于elementUI日期组件格式转换

<el-form-item label="毕业时间:" prop="graduationDate">

        <template>
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker style="width: 200px;" size="mini" v-model="formdata.graduationDate" align="right" type="date"
              placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </template>
      </el-form-item>
      

value-format="yyyy-MM-dd" 日期格式转换

5.遇到的一个功能 @change

再点击下拉选项的时候执行的一个函数
根据下拉框的选择的值不同可以用来改变其周围的属性值

6. 后台返回的值是数值 在前台转换为数值对应的label :formatter

为每一列绑定属性formatter,值为一个函数,返回要翻译成的中文字符串

<el-table-column prop="expertsp" :formatter="getExpertsp" label="审批状态" width="85">
  </el-table-column>
  
  data中的定义
  Expertsp: [{
        value: '1',
        label: '新增'
      }, {
        value: '2',
        label: '审批中'
      },
      {
        value: '3',
        label: '审批通过'
      },
      {
        value: '4',
        label: '审批不通过'
      }
    ],
    
     // 有多少条数据此函数就会触发多少次(后台传数据,前台遍历显示对应的值)函数
  getExpertsp(row, col) {
    for (var i in this.Expertsp) {
      if (this.Expertsp[i].value == row.expertsp) {
        return this.Expertsp[i].label
      }

    }
  },
  

7.vue 给每行加序号

①我们想在 el-table 中添加序号列时，如下

<el-table-column label="序号" type="index" width="50" align="center">
</el-table-column>

我们会惊奇的发现，我们翻页时，序号永远都是从1开始。因为每一次翻页都是根据当前数据的index显示，所以我们要自定义
改造如下

<el-table-column label="序号" type="index" width="50" align="center">
  <template scope="scope">
    <span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
  </template>
</el-table-column>

两种

<el-table-column label="序号" type="index" width="60" :show-overflow-tooltip="true">
    <template scope="scope">
      <span>{{scope.$index + 1}}</span>
    </template>
  </el-table-column>

8.下拉选框里的功能

clearable 可清除下拉框里内容

filterable 搜索功能 能搜索此字段的存在内容

9.遇见的一个功能,在本页面跳转后 在打开的页面返回,刷新本来的界面

 // 跳转后页面刷新 和data,methods同级
beforeRouteLeave(to, from, next) {
  console.log(to.path)
  to.meta.keepAlive = false
  next()
},

10. 解决界面无法渲染,但是属性有值,无法显示

方法:

手动渲染

this.$forceUpdate() //数据层次太多的时候,可以手动调用,触发render函数进行自动更新

this.$set(this.formdata,'firstname',name + sex)

自己理解的意思: this.formdata(可以使form的绑定属性,也可以是table; 'firstname'是属性名字单引号; name + sex是赋值给firstname的值)

11.附件文件下载特殊字符问题

附件下载路径包含特殊字符  如空格  /等 前台会报400错误,访问不到后台,  需要用到  encodeURIComponent函数将特殊url字符进行转码

        location.href = this.serverName + '/noticeDaiGuaWang/purchaseDocDownload.do?path=' + encodeURIComponent(row.noticefile)
        

12. 头疼!!!大bug element的dateTimePicker组件清除选择时间 检索时报错 TypeError: Cannot read property ‘0‘ of null的处理

在vue的script中添加以下代码：“form2.date”对应的是el-date-picker的v-model值

watch: {
  "formdata.createtime"(newVal) {
    if (newVal == null) {
      this.formdata.createtime = [];
    }
  }
},

13 .解决vue 点击链接第一次能访问后台查询数据 第二次就不可以查到数据

/*监听路径跳转 第二次点击不生效的解决方法!!!/

watch: {
  '$route'(to, from) {
    //防止有缓存数据  先清空
    this.formdata = {}
    this.tableData = []
    // this.$route.query. (自己业务需求的值)
    this.loadRouteRow(this.$route.query.row, this.$route.query.batch, this.$route.query.noticeName) //跳转后赋值
    // 调用的自己的查询方法
    this.selectMaterialSizeMsgList(this.$route.query.row)
  }
},

14. 解决在跳转界面内再次跳转到别的界面 返回红数据丢失,对跳转前页面数据进行保存处理方式

/**如果不知道什么时候会跳转 就写在这个生命周期里面 ,跳转页面钱保存本页面的数据*/
beforeDestroy() {
  // 变量名称  ,要存储的对象
  sessionStorage.setItem('formdata', JSON.stringify(this.formdata))
  sessionStorage.setItem('tableData', JSON.stringify(this.tableData))
  sessionStorage.setItem('optionsSupplierName', JSON.stringify(this.optionsSupplierName))
},

 created() {
  // 获取源数据
  let formdata = JSON.parse(sessionStorage.getItem('formdata'))
  let tableData = JSON.parse(sessionStorage.getItem('tableData'))
  let optionsSupplierName = JSON.parse(sessionStorage.getItem('optionsSupplierName'))
  // Object.assign方法 赋值 （目标对象， 源对象）
  Object.assign(this.formdata, formdata)
  Object.assign(this.tableData, tableData)
  Object.assign(this.optionsSupplierName, optionsSupplierName)
},

15.解决BigDecimal类型查询出来没有值 会显示0的解决方法

          let data = response.data.data
          // 判断值为0的话就不做显示
          for (let key in data) {
            if (data[key] == 0) {
              data[key] = ''
            }
          }

16.解决点击dialog弹窗时候会有阴影

Dialog有阴影解决办法:

   解决方法：在 el-dialog 里添加 
     append-to-body 即可               

17.举例解决methods方法调用想实现同步(因为axions和ajax有点区别) 可以避免接收promise类型数据,难以取值

 /**
 * 自己的例子(这是调用方法),
 * 我理解的是因为在这里有表单验证所以 async 放在(validate)后
 * 然后调用同步方法需要加 await 关键字
 */
 /**新增保存功能*/
  newSave(ruleForm) {
    this.$refs[ruleForm].validate(async (valid) => {
      if (valid) { //  验证
    maxXuhao = await this.getUnitID()
        }
    )}
    
  /**
  * 这是被调用方法
  * 关键字 : async  await 
  */
  /**查询unitid*/
  async getUnitID() {
    var url = 'PurchaseResultEdit/getUnitID.do'
    var param = {}
    await axios.get(url, param).then(response => {
      if (response.data.code == '0') {
        let maxXuhao = ''
        if (response.data.data != null) {
          maxXuhao = response.data.data + 1
        } else {
          maxXuhao = 1
        }
        this.unitID = maxXuhao
      } else {
        this.$message({
          type: 'error',
          message: '操作失败!' + response.data.msg
        });
      }
    });
  },

18. vue判断包含 indexof 判断不等于-1就是有存在的值

if (',11,12,13,14,15,32,' && ',11,12,13,14,15,32,'.indexOf(',' + localStorage.affairid + ',') != -1 &&
      localStorage.deptid !=
      '' && localStorage.deptid != null) {
      zhongxin = localStorage.deptid
    }