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

最新推荐文章于 2024-06-07 10:52:19 发布

沃特艾文儿～

最新推荐文章于 2024-06-07 10:52:19 发布

阅读量6k

点赞数 2

分类专栏： Vue 前后端开发小技巧以及经验文章标签： elementui

本文链接：https://blog.csdn.net/qq_44614115/article/details/114480719

版权

前后端开发同时被 3 个专栏收录

54 篇文章 2 订阅

订阅专栏

小技巧以及经验

51 篇文章 2 订阅

订阅专栏

Vue

24 篇文章 0 订阅

订阅专栏

如下图所示，这是一个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>