web前端-vue element UI el-table，el-table-column表格添加行点击事件

短命女 2023-10-03 10:57 43阅读 0赞

el-table如下数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbmdnZVFpbmdjaHVu_size_16_color_FFFFFF_t_70][]

一、el-table 整行都可以点击事件

定义点击事件 @row-click="openDetails"；openDetails为方法名

<el-table v-loading="loading" :data="userList" @selection-            
         change="handleSelectionChange" @row-click="openDetails">
    </el-table>

方法实现

//对应的 methods 中
    //点击click，change事件
    methods: {
        //单元格整行点击事件
        openDetails (row) {
            //具体操作
            console.log(this.$route ,"----当前页面的url信息----");
        },
    }

二、el-table-column 某列可点

定义点击事件 @click="openDetails(scope.row)"；openDetails为方法名；将本行数据参数scope.row带过去

在el-table-column中添加一个，重新把数据显示到div或者span中，不然页面会没有数据显示

<el-table-column label="编码" align="center" prop="code" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                  <div @click="openDetails(scope.row)">{
       { scope.row.code }}</div>
              </template>
    </el-table-column>

方法实现

methods: {
          //单元格整行点击事件
          openDetails (row) {
              //具体操作
              console.log(this.$route ,"----当前页面的url信息----");
          },
    }

输出如下：

![20210714130436514.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbmdnZVFpbmdjaHVu_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021071413051357.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbmdnZVFpbmdjaHVu,size_16,color_FFFFFF,t_70
[20210714130436514.png]: https://img-blog.csdnimg.cn/20210714130436514.png