el-table表格的使用记录

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

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

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()
}

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>

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

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

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

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>

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); 

  }

}
最后修改:2021 年 07 月 06 日 01 : 41 PM
如果觉得我的文章对你有用,请随意赞赏