element组件:直接回车、表格单选、表格多选分页+回显,el-col样式错乱

113 阅读1分钟

单个form-item直接回车的写法

  1. 在el-form上加@submit.native.prevent
  2. 在el-form-item上加@keyup.enter.native="getData(1)"

表格单选

 <el-table :data="tableList" height="100%" stripe ref="tableRef" @selection-change="handleSelectionChange">
// 单选
    handleSelectionChange(selection, row) {
      if (Object.keys(this.singleSelection).length > 0) {
        this.$refs.tableRef.toggleRowSelection(this.singleSelection, false) // 取消之前的选择
      }
      this.singleSelection = row // 更新当前选中的行
    },

表格多选分页+回显

先调接口拿到所有已经选择的数据给table勾上

 selectLs.forEach((row) => {
              this.$refs.multipleTable.toggleRowSelection(row, true)
            })

2.再正常分页调接口,正常操作,跳页选择或者取消都可以

将el-col全部放到el-row中,可能会出现分辨率或缩放、内容不同导致el-col高度不一致,而使布局异常。

解决方法: el-row添加flex布局,设置flex-wrap:wrap即可。