一、分页相关

踩坑场景:
前端对拿到的总数据进行分页,上一页没有问题,下一页即使没有数据也可以点击。
解决
ElementUI的el-pagination标签会根据:total属性自动判断是否禁用上一页、下一页。只需要加上该属性即可。即使是不需要显示出共xxx条也要定义:total,在layout属性中不体现就好了

以下是前端假分页的模板:

<el-table :data="tableData3.slice((page - 1) * rows, page * rows)" stripe border style="width: 100%">
    <el-table-column
      type="index"
      :index="indexMethod">
    </el-table-column>
</el-table>

<el-pagination 
class="pagination" 
background 
@current-change="handleCurrentChange" 
:current-page="page" 
:page-size="rows" 
:total="tableData3.length" 
layout="total, prev, pager, next" 
style="margin-top: 10px; 
text-align: center;"
>
</el-pagination>
page = 1,
rows = 10

indexMethod (index) {
  return (this.page - 1) * this.rows + index + 1
},
handleCurrentChange (page) {
  this.page = page
}

二、v-if多条件、Select/Ridio的值类型、标签的属性拼接

(1)Select/Ridio中如果要选定的值为String就用label,要为int就用:label
PS:下拉框Select如果默认的值不是想要显示的label值,那就是类型错了,可能后端传的是string而需要的是int,接受的时候用Number()再强转一下

(2)v-if的条件判断可以写成以下形式:

<el-form-item label="更新方式" v-if="[2,3].includes(form.versionType)" prop="updateType">
  <el-radio v-model="form.updateType" :label="1">正常更新</el-radio>
  <el-radio v-model="form.updateType" :label="2">强制更新</el-radio>
</el-form-item>

(3)标签中的的属性可以进行操作和拼接,只需要加:即可

:title="formType == 'add' ? '添加充值活动' : '编辑充值活动'"

:label="'¥' + item.amount/100"

三、Table表单相关

(1)table表单添加自定义组件

踩坑场景:

需要在表头添加一行表头文字以及增加按钮,并根据boolean显示/隐藏按钮,做法是定义一个父el-table-column包裹着表头文字、按钮,以及各列的子el-table-column。但是若是直接加入span以及button标签则会被columm覆盖在最底层显示不出来;若是用template包裹这两个标签则相当于重写最底层,对于boolean的修改只渲染加载页面的第一次,后面的值不会改变,也不会重新渲染,加了:key也没有效果。
解决:
el-table-column的监听事件:render-header进行回调判断,通过判断boolean返回标签元素给表头

<el-table :data="tableData1" stripe border style="width: 100%" inde>
  <el-table-column :render-header="renderHeader1">
    <el-table-column prop="xx" label="xx" min-width="xx">子标签123</el-table-column>
  </el-table-column>
</el-table>
renderHeader1 (h) {
  if (this.isAddTable1 === true) {
    return (
      <div>
        <span style="float:left">设置更新</span>
        <el-button style="float:right; margin-right: 10px;" onclick={() => this.handleAdd(0, 1)} type="primary" size="small">  新增  </el-button>
      </div>
    )
  } else {
    return (
      <div>
        <span style="float:left">设置更新</span>
      </div>
    )
  }
},

**解决2:**
可以采用ElementUI的Formatter事件,大致同上:[ElementUI formatter使用](http://www.yantieyu.top/index.php/archives/20/)

(2)表单校验

如果表单中只需要进行非空判断(或再额外加一个最大值max{ max: 50, message: '帖子内容不超过50个字', trigger: 'blur'}),则只需要在el-form-item上加rules用法就行了,但是若使用了自定义的校验就只能用第二种方法。
方法一:

<el-form :model="form" ref="form">
  <el-form-item prop="title" label="内容" :rules="[{ required: true, message: '帖子内容不能为空', trigger: 'blur' },{ max: 50, message: '帖子内容不超过50个字', trigger: 'blur'} ]>
    <el-input v-model="form.title" style="width: 90%"></el-input>
  </el-form-item>
</el-form>

方法二:通过prop绑定对应的值

<el-form :model="form" ref="form" label-width="100px" :rules="rules">
  <el-form-item prop="present" label="赠送趣豆">
    <el-input v-model="form.present"></el-input>
  </el-form-item>
</el-form>
export default {
  data () {
    let checkNum = (rule, value, callback) => {
      let val = Number(value)
      let numReg = /^\d+$/
      if (numReg.test(val)) {
        callback()
      } else {
        return callback(new Error())
      }
    }
    let checkPresent = (rule, value, callback) => {
      if (this.form.amount >= value) {
        callback()
      } else {
        return callback(new Error())
      }
    }
  }
  return {
    rules: {
      present: [
        { required: true, message: '赠送趣豆不能为空', trigger: 'blur' },
        { validator: checkNum, message: '趣豆数必须为整数', trigger: 'blur' },
        { validator: checkPresent, message: '赠送的趣豆不能大于对应额度包含的基础趣豆', trigger: 'blur' }
      ]
    }
  }
}

四、日期、时间、时间戳

踩坑场景:
原先数据库中存储的时间戳单位是到秒,而时间组件的时间戳默认是毫秒,两则相差了1000倍,因此需要转换。

在表格中将时间戳显示成标准时间2020-11-02 16:08:19(因为这里是直接从数据库表中拿出来正好是秒的单位):

<el-table-column label="创建时间" min-width="100px">
  <template slot-scope="scope">
    <span>{{scope.row.create_time | date('Y-m-d H:i:s') }}</span>
  </template>
</el-table-column>

添加、编辑的时间组件:

<el-form-item prop="start_time" label="开始时间">
  <el-date-picker v-model="form.start_time" type="datetime" placeholder="选择日期" value-format="timestamp" clearable></el-date-picker>
</el-form-item>

初始化编辑表单时候,要把对应的数据库秒转成时间组件的毫秒:

soa.getPromotionListFromDb('', id).then(res => {
  this.form = res.data[0]
  this.form.start_time = res.data[0].start_time * 1000
})

增加或者编辑时选中的时间组件为毫秒,要转成秒存储到数据库中:

this.form.start_time = dateFormat(this.form.start_time / 1000, 'Y-m-d H:i:s')
SoaClient.getSoa('live_trade', 'v1/AdminInpour').addPackagePromotion(this.form).then(res => {
  ...
}

表单校验时判断结束时间要大于开始时间:

let checkTime = (rule, value, callback) => {
  if (this.form.start_time < this.form.end_time) {
    callback()
  } else {
    return callback(new Error())
  }
}

五、插槽

踩坑场景:
一个el-table-column中需要组合显示两个字段,需要通过template实现

<el-table-column prop="alertBeginVersion,alertEndVersion" label="提示版本区间" min-width="100">
  <template slot-scope="scope">
    <span>{{scope.row.alertBeginVersion}}-{{scope.row.alertEndVersion}}</span>
  </template>
</el-table-column>

六、对JSON.stringify()数据格式化输出

打印返回值时不要直接用console.log(JSON.stringify(res)),可以用以下方法格式化输出:

var str = JSON.stringify(res,undefined,2)
this.textarea = str

【报错记录】

1、聚合接口->code405

Service/Server接口配置错误

2、找不到系统"xx"、系统出错请稍后再试[j01006]

项目没拉到最新。git pull一下

3、后端调用失败...超过3次...,rpc参数获取out of range

参数没给对,给多给少都可能(遇到是给少)。在聚合的时候扔需要给没用到的接口按顺序预留参数位置,穿个''就行了。

4、can't no find module

如果只是你开发的页面有可能是自动部署还没上去,如果是所有页面都找不到那就是网关配错了。开启ms只是访问测试环境,仍要在hosts上配置127.0.0.1对应的开发环境。

Last modification:November 4th, 2020 at 03:40 pm
喵ฅฅ