[ElementUI][VUE]开发中的踩坑记录

Author：唐宋丶
发布时间：November 1, 2020
1457 views
No comments
1868 words
Categories：前端体系

## 一、分页相关

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

**以下是前端假分页的模板：**

```Html
<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>
```

```JavaScript
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`<br>PS：下拉框Select如果默认的值不是想要显示的 `label`值，那就是类型错了，可能后端传的是string而需要的是int，接受的时候用 `Number()`再强转一下

#### （2）v-if的**或**条件判断可以写成以下形式：

```HTML
<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）标签中的的属性可以进行操作和拼接，只需要加 `:`即可

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

:label="'￥' + item.amount/100"
```

---

## 三、Table表单相关

### （1）table表单添加自定义组件

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

```HTML
<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>
```

```JavaScript
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用法就行了，但是若使用了自定义的校验就只能用第二种方法。
方法一：

```HTML
<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绑定对应的值

```HTML
<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>
```

```JavaScript
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`（因为这里是直接从数据库表中拿出来正好是秒的单位）：**

```HTML
<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>
```

**添加、编辑的时间组件：**

```HTML
<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>
```

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

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

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

```JavaScript
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 => {
  ...
}
```

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

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

---

## 五、插槽

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

```HTML
<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))`，可以用以下方法格式化输出：

```JavaScript
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：August 14, 2022

喵ฅฅ