使用vuejs过程中遇到的问题(三)

使用vuejs过程中遇到的问题(三)

大部分都是配合element-ui来搭建前端框架

el-table高度设置,单元格内容居中

  • 为了达到页面中table的最大高度,出现y轴上的滚动条,可以设置max-height
  • el-table-column 设置为aligh:center,内容显示居中

element ui框架中table的分页问题

在分页的清空下,如果切换了页码,那么之前页里面的选择框就默认消失了,这里可以使用框架提供的方法来解决这个问题
也可以处理,在用v-for来渲染同个table的时候,如何保持住不同table的选择框状态

  1. 在el-table中加入:row-key="getRowKeys"
  2. 加入methods

    1
    2
    3
    getRowKeys (row) {
    return row.id
    },
  3. 在选项框那一列,加入:reserve-selection="true"

  4. 加入清除机制, this.$refs.tableName.clearSelection()就可以清除掉

vue中的v-for循环出来的多个ref对象,如果捕获

可以使用this.$refs.xxxx来展示名字为xxxx的元素,返回的是一个数组

1
2
3
this.$refs.newDataTable.forEach(row => {
row.clearSelection()
})