vue前端页面随笔

目录

@keyup.enter.native 注解不生效

:show-overflow-tooltip='true' 显示不全

表格根据条件改变单元格字体颜色

@keyup.enter.native 注解不生效

<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item style="margin-left: 80px">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

上述注解为 键盘回车触发事件

解决方法：

在 el-form 上添加 @submit.native.prevent

:show-overflow-tooltip='true' 显示不全

<el-table v-loading="loading" border max-height="550" :data="dataList">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="经历" align="center" prop="experience" key="experience" v-if="columns[0].visible" width="180" :show-overflow-tooltip='true' fixed/>
</el-table>

上述属性为：表格中该列的内容，超过当前单元格时，隐藏多余部分

当鼠标指针放在内容上时，上方出现窗口显示全部内容，且默认宽度为全屏

解决方法：css改变宽度

<style type="text/css">
.el-tooltip__popper {
  font-size: 14px;
  max-width: 50%
}
</style>

表格根据条件改变单元格字体颜色

在 el-table 标签中加入 :cell-style="cellStyle" 事件

在 methods 中编写函数 cellStyle

<el-table v-loading="loading" border :max-height="tableMaxHeight" :data="dataList" 
:cell-style="cellStyle" @selection-change="handleSelectionChange">
</el-table>

    cellStyle({
                row, // 行
                column, // 列
                rowIndex, // 行索引
                columnIndex, // 列索引
              }) {
      if ((row.age > 24) && columnIndex === 6)
        return 'color : red';
    },

(row.age > 24) && columnIndex === 6 为判断条件，并指定列索引下标为 6 的列进行样式改变