vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Element-UI Table 表格指定列添加点击事件

关于Element-UI Table 表格指定列添加点击事件

作者:沃特艾文儿~

这篇文章主要介绍了关于Element-UI Table 表格指定列添加点击事件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Element-UI Table 表格指定列添加点击事件

如下图所示,这是一个ele UI库中的table,一般情况下我们只能通过tableDATA来向里面填充数据来展示,而无法对其中添加点击时间等操作。这里就来记录学习一下。

这是我们的一般使用方法,只能将数据进行展示。我们需要在el-table-column标签里面来进行处理

        <el-table :data="tableData" style="width: 100%;height: 450px;"
                  :row-class-name="tableRowClassName">
          :row-class-name="tableRowClassName">
          <el-table-column
              prop="title"
              label=""
              width="500">
          </el-table-column>
          <el-table-column
              prop="author"
              label=""
              width="100">
          </el-table-column>
        </el-table>

我们在标签里面加上我们自定义的标签,可以通过{{scope.row.title}}的方法来获取数据,并来修改展示的效果。

如下面所示。

        <el-table :data="tableData" style="width: 100%;height: 450px;"
                  :row-class-name="tableRowClassName">
          :row-class-name="tableRowClassName">
          <el-table-column
              prop="title"
              label=""
              width="500">
            <template slot-scope="scope">
              <a @click="detail(scope.row.id)" style="color:black;cursor:pointer;font-size: 16px;">{{
                  scope.row.title
                }}</a>
            </template>
          </el-table-column>
          <el-table-column
              prop="author"
              label=""
              width="100">
          </el-table-column>
        </el-table>

element-ui table表格错位问题

问题描述

在使用element-ui中的 el-table 时,使用了 fixed 属性固定列之后,就会容易在各种场景出现表格错位的问题。

解决方案

解决办法1 element-ui官网提供的doLayout方法:

直接在渲染表格时加入此方法

this.$nextTick(() => {
      // myTable是表格的ref属性值
      if (this.$refs.myTable && this.$refs.myTable.doLayout) {
        this.$refs.myTable.doLayout();
      }
})

解决办法2 element-ui官网提供的doLayout方法:

1.给所有的列增加width,即可解决

2.把 加了fixed属性的 固定列的 min-width 改成 width

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文