Element UI 笔记

发表于 更新于 分类于 Waline：

记录一下在使用elementUI时遇到的坑。

elementUI有的事件命名容易让人产生疑惑，如handleSizeChange，handleCLose等。

分页组件

1
2
3
4
5
6
7
8
<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
      :page-size="100"
      layout="total, prev, pager, next"
      :total="1000">
    </el-pagination>

这个组件中的handleSizeChange听起来是pageSize改变时触发的，感觉上触发时pageSize已经改了，实际上你需要在函数里面再重新赋值才有用。

Dialog

1
2
3
4
5
6
7
8
9
10
11
<el-dialog
  title="Tips"
  :visible.sync="dialogVisible"
  width="30%"
  @close="handleClose">
  <span>This is a message</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
  </span>
</el-dialog>

上面这段代码dialog的显示与隐藏由“dialogVisible” 决定，这个时候你直接点关闭按钮是无效的，我们必须在handleClose中把“dialogVisible”置为false才有效。

DatePicker

element-ui的时间选择器返回的时间如果直接拼到url里面，会转成GMT+8时间，也就是本地时间，而不是UTC时间。

所以如果要使用UTC时间就要先转换一下。

如果你是用moment转换的，要注意一点，moment的utc函数转换出来的时间是没有毫秒数的。