el-table表格的使用记录

为el-table添加行点击的背景色

  • 解决方案
    在全局样式表中添加以下css代码：
.el-table_body tr.current-row>td{
       background-color:white !important;
    }
JavaScript

el-table不换行显示问题

  • 解决方案

el-table标签加tooltip-effect="light"
el-table-column标签加:show-overflow-tooltip="true"

el-table底部出现空白却有滚动条问题

  • 解决方案

如果不是缓存页面，在mounted调用，如果是缓存页面，则在activated调用。
代码：

mounted() {
    this.$nextTick(() => {
        this.$refs.simpleTable.doLayout()
    })
},
activated() {
    this.$refs.simpleTable.doLayout()
}
JavaScript

el-table高度自适应问题

  • 纯css设置

el-table外层放一个div，并且将div的位置定位好，然后设置el-table高度为100%

el-table动态设置表格列数问题

  • 描述

当表格列数较多并且表格列数不确定时需要固定列以及动态添加列。

  • 问题

1.如何固定列数？
使用el-table的fixed属性固定列。表格每列宽度设置使用width="number".

2.如何动态绑定v-model(绑定值为表格列值)?
绑定方式如下：

<el-input v-model="scope.row[item.prop]"></el-input>
HTML

注：其中item.prop为表格列是属性值。

el-input获得焦点便且选中文字

  • 方法：
< el-input v-model="addDialogForm.name" @focus=" focus($event)"></ el-input>
focus( event) {
event.currentTarget. select();
}
HTML

el-table中动态数据单元格的合并

合并示例代码：
html:

<el-table :data="data" border height="600" :span-method="objectSpanMethod">

              <el-table-column  :label="head" v-for="(head, key) in header" :key="head">

                  <template slot-scope="scope">

                    {{data[scope.$index][key]}}

                  </template>

              </el-table-column>

</el-table>
HTML

js:

export default {

  data() {

    return {

        data:[],

        spanArr:[],   

    };

  },

  methods: {

  getSpanArr(data) {

      console.log(data)

          for (var i = 0; i < data.length; i++) {

            if (i === 0) {

              this.spanArr.push(1);

              this.pos = 0

            } else {

              // 判断当前元素与上一个元素是否相同,因合并第一个所以[0]

            if (data[i][0] === data[i - 1][0]) {

                this.spanArr[this.pos] += 1;

                this.spanArr.push(0);

              } else {

                this.spanArr.push(1);

                this.pos = i;

              }

            }

        }

    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {

      if (columnIndex === 0) {

            const _row = this.spanArr[rowIndex];

            const _col = _row > 0 ? 1 : 0;

            return {

                  rowspan: _row,

                  colspan: _col

            }

          }

      }

  },

  mounted() {

      this.getSpanArr(this.data); 

  }

}
JavaScript

ElementUI组件踩坑记录

el-select踩坑记录

  • el-select绑定值格式不统一问题
    问题描述

当el-select开始v-model设定的值是整型时，提交到后台回显信息时数据格式变为字符串，此时el-select在页面上会显示value值而不是label值，此种情况往往会在value值是数字时发生。
解决方案
出现这类问题是数据格式不一致的问题造成的，因此只需要把el-option绑定数组中的value值类型和回显的v-model绑定值类型设置成一致即可。例如：

<el-select v-model="addForm.bindDeviceId" placeholder="请选择">
              <el-option
                v-for="(item,index) in deviceOptions"
                :key="index"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
HTML

上述代码中addForm.bindDeviceId的值是字符串类型，而deviceOptions数组中的value值是数字类型，那么我们只需将bindDeviceId的值转化成与value值格式一致：

edit(row){
this.addForm.bindDeviceId=Number.parseInt(row.bindDeviceId)
}
JavaScript
  • el-form在v-for循环体中调用this.$refs问题
    描述

当我们使用v-for循环el-form表单时，需对每个表单做校验规则校验，此时调用this.$refs.['formname'].validate()方法会出现$refs.formname.validate() is not function的报错
解决方案
这种情况需要为$refs调用添加索引（index为v-for中的index索引）

submit(index){
this.$refs['formname'][index].validate((valid)=>{})
}
JavaScript

给element回调函数中添加自定义参数

  • 描述
    在elementui组件中使用组件定义的事件比如@click,@change等，当需要向回调函数中传入额外参数又能接收回调函数中自带的参数时，我们需要自定义参数的方式调用事件。
  • 方法
    为组件绑定的事件方式如下：
<el-switch v-model="scope.row.status=='启用'?true:false" @change="(value)=>changefaultcodeStatus(value,scope.row)"></el-switch>
HTML

这样在回调函数中即可传入自定义参数同时能获取自带参数。

el-pagination设置total分页失效的问题

  • 问题描述
    对表格数据进行分页，有两页数据却只能展示一页数据，例如总共6条数据，每页设置展示5条但是分页的第2页却不显示
  • 原因
    （1）可能是绑定的total属性非数值是字符串

（2）为组件page-size属性设置的数值和分页查询每页个数不对应。

  • 解决
    （1）确保绑定的total为数值类型

（2）page-size属性设定的值要和分页查询每页数量对应

el-table单元格中实现el-input或者el-select占满

实现

  1. 去除单元格的padding
    利用cell-style属性设置表格单元格的padding
:cell-style="{padding:'0px !important'}"
Vue
  1. 控制台检查元素发现单元格下一个层级类为cell的div还设置了padding-left和padding-right属性，将其设置为0

  • 先为具体的单元格添加class类名

     el-table组件中调用cell-class-name属性

    :cell-class-name="handlePad"
    Vue
  • handlePad函数中返回类名
handlePad({row, column, rowIndex, columnIndex}){
        console.log(column)
        if(column.label=='表格列名'){
          return 'clear-padding'
        }
      },
Js
  • 在css中添加去除padding-left、padding-right值的样式
.el-table /deep/ .clear-padding .cell{
  padding-left: 0px !important;
  padding-right: 0px !important;
}
CSS

注意这里类选择器的方式，其他书写方式不生效

  1. 去除el-input或者el-select的外边框、设置高度占满整个单元格
.clear-border /deep/ .el-input--small .el-input__inner{
  border: none;
  height: 50px;
  line-height: 50px;
}
CSS

总结

  • 表格单元格的上下左右padding距离设置的方式需注意，其他方式不生效。
  • 单元格的上下padding需整个表格单元格都设置不然内部el-inpuit组件始终与单元格有间距。

el-table设置默认选中行无效

  • 问题描述
    当设置el-table默认高亮选中某一行时，只需要配置highlight-current-row属性然后调用setCurrentRow方法主动触发选中某一行即可，其中setCurrentRow方法的参数为要选中行的row，但是自己在开发过程中发现按照步骤并没有实现默认选中某一行的效果。
  • 排查问题
    经过排查发现setCurrentRow方法的参数必须是row，而在项目中调用方法的时候传的参数是复制row的一个变量，如下：
      this.$nextTick(()=>{
        this.$refs['dataTableSection'].setCurrentRow(this.sectionItem)
        })
Js

问题就出现在这里，因为this.sectionItem复制row的方式并不是简单的=复制，而是采用了如下的复制方式

this.sectionItem=JSON.parse(JSON.stringfy(row))
Js

而采用如下方式却成功实现了默认选中一行效果：

this.sectionItem=row
      this.$nextTick(()=>{
        this.$refs['dataTableSection'].setCurrentRow(this.sectionItem)
        })
Js
  • 总结
    经过分析得出el-table默认选中方法setCurrentRow的参数必须与row存在引用关系。

改变el-select、el-cascader等下拉框的层级

  • 改变el-select的层级
    （1）在修改下拉框层级样式之前需要设置popper-append-to-body属性，即：:popper-append-to-body="false"

（2）添加修改层级的样式

.zpselect /deep/ .select-options {
  z-index: 9999 !important;
}
CSS
  • 改变el-cascader的层级
    （1）在修改下拉框层级样式之前需要设置append-to-body属性，即：:append-to-body="false"

（2）添加修改层级的样式

.zpselect /deep/  .el-popper{
z-index: 9999 !important;
}
CSS

el-form表单项动态添加校验

  • 为rules绑定条件判断值
    <el-form-item label="工艺流程：" prop="processId" key="processId"
     :rules="uploadForm.materialId.length!=0? uploadFormRules.processId : [{require: false}]"
    ></el-form-item>
HTML

<p style="color:red">注意</p>
这里需要绑定key值，否则会出现表单项不校验问题

最后修改：2023 年 03 月 09 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏