Element UI Notes

Posted on Edited on In Waline:

Take note of the pitfalls you encounter while using elementUI.

Some event names in elementUI are confusing, such as handleSizeChange, handleCLose, etc.

Paging component

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>

The handleSizeChange in this component sounds like it is triggered when the pageSize changes. It feels like the pageSize has been changed when it is triggered. In fact, you need to reassign it in the function to be useful.

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>

The display and hide of the dialog in the above code is determined by “dialogVisible”. At this time, it is invalid for you to directly click the close button. We must set “dialogVisible” to false in handleClose to be effective.

DatePicker

If the time returned by the element-ui time selector is directly spelled into the url, it will be converted to GMT + 8 time, which is the local time, not UTC time.

So if you want to use UTC time, you need to convert it first.

If you are using moment conversion, please note that the time converted by the utc function of moment has no milliseconds.