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信息----");
      },
}

 输出如下:

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐