记录element用点(以vue为框架)

1.Popconfirm

<el-popconfirm :title="`您确定要删除账号${account}吗？`" @onConfirm="delAccount" @onCancel="cancelDel">
    <el-button slot="reference">删除账号</el-button>
</el-popconfirm>

2.MessageBox

按需加载
import { MessageBox } from 'element-ui'
Vue.prototype.$messageBox = MessageBox
this.$messageBox.alert('登录信息超时，请重新登录！', '登录超时', {
  callback: action => {
    location.href = '/login'
  }
})

3.Image

图片加载失败
<el-image
  style="width: 104px; height: 100px"
  :src="require('@/assets/logo.png')">  // （如果是网图放正常链接）需要添加require才能加载正常
</el-image>

4.Form

表单清空(取消添加，重置)
<el-form :inline="true" :label-position="'right'" :model="form" ref="forms" align="center">
  <el-form-item label="设备名称:" prop="name">
    <el-input size="small" v-model="form.name" placeholder="请输入设备名称" clearable></el-input>
  </el-form-item>
  <el-form-item label="设备名称:" prop="age">
    <el-input size="small" v-model="form.age" placeholder="请输入设备名称" clearable></el-input>
  </el-form-item>
</el-form>

1.el-form添加ref  // ref="forms"
2.el-form-item添加prop(绑定值跟表单值一样)  // prop="name"
3.调用方法：this.$refs.forms.resetFields()

validate-on-rule-change（是否在 'rules' 属性改变后立即触发一次验证）设置false

5.Element默认属性

全局安装
Vue.use(Element, {
  size: "small"
})

局部安装
Vue.prototype.$ELEMENT = { size: "small" }

6.el-form-item

<el-form-item label="选择日期" label-width="120px" prop="time">
  <el-date-picker
    v-model="addForm.time"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="timestamp">
  </el-date-picker>endTime
</el-form-item>

7.表格表头样式

<el-table border stripe  :cell-style="rowClass"  :header-cell-style="headClass" >
...
</el-table>

methods: {
  headClass() { // 表头样式设置
    return "text-align: center;"
  },
  rowClass() { // 表格样式设置
    return "text-align: center;"
  }
}

8.添加原生事件

<el-date-picker
  v-model="combatTime"
  type="datetime"
  placeholder="选择日期时间"
  align="right"
  size="mini"
  value-format="timestamp"
  @click.native="clearCombatTime"
  @change="upCombatTime">
</el-date-picker>

@click.native="clearCombatTime" 是原生事件（.native）
@change="upCombatTime"  是element自带的事件

9.pagination分页要注意页码数

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="page.index"
  :page-sizes="[10, 15, 20]"
  :page-size="page.size"
  layout="total, sizes, prev, pager, next, jumper"
  :total="page.total">
</el-pagination>

页码按钮的数量，当总页数超过该值时会折叠
注意：大于等于 5 且小于等于 21 的奇数