vue:使用技巧汇总篇

• 初级级提升篇

el-table相关

---

2018-9-3 15:09:20
element-ui 改变行的颜色

methods

rowStyle({ row, rowIndex }) {
      // if (rowIndex === 0) {
      return "background-color:green";
      // } else {
      // return ''
      // }
    },

表格样式

<el-table :data="props.row.orderLineList" :show-header="false" class="table-wapper" :row-style="rowStyle">

---

form表单label字体对齐方式::label-position=“labelPosition”(属性值:top,left,right)

<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">

---

2018-8-20 18:43:03
dayjs 的使用技巧
import dayjs from ‘dayjs’,
获取时间戳
dayjs().valueOf()

---

2018-8-15 10:48:18
汉字换行
white-space:pre-wrap
英文换行
word-break:break-all;
element -ui的弹窗的按钮样式(需要调整为确定在左边,取消在右边)customClass: ‘confirm-box’,

要配合宽度使用

---

apiListAffixDel({id:id},res=>{
        this.$confirm('确定删除吗?', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          customClass: 'confirm-box',
          type: 'warning'
        }).then(() => {
          apiListRowDel({id:id},res=>{
            console.log(res);
            this.msg(res.data.data,'success')
            this.getListEvent();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      })

---

2018-8-13 15:49:08

• 表格自定义验证时的规则写法

el-form 绑定的:model=“config”
el-form-item 的prop 则使用 的是showAddCreditLog.eventDate
元素使用的则是v-model=“config.sho