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

Posted 2021-12-14 MinggeQingchun

el-table如下数据

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

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

 <!-- @row-click 单元格整行点击事件 -->  <!--@row-click="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信息----");
      ,

 输出如下：