学无先后,达者为师

网站首页 Vue 正文

VUE-Eliment-Table使用行点击事件

作者:天天上天庭 更新时间: 2021-12-04 Vue
 
<el-table v-show="num===0" v-loading="loading" :data="invoiceList" style="width: 100%"
              height="450" @selection-change="handleSelectionChangeInvoice" size='mini' @row-click="handClick">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
      <el-table-column label="发票状态" align="center" width="100" prop="invoiceState" :formatter="invoiceStateFormat"/>
      <el-table-column label="发票类型" align="center" width="100" prop="invoiceType" :formatter="invoiceTypeFormat"/>
      <el-table-column label="交易号" align="center" width="150" prop="invoiceApiSellOrders[0].dealCodeList"
                       show-overflow-tooltip/>
      <el-table-column label="销售店铺" align="center" width="150" prop="invoiceApiSellOrders[0].sellStoreName"
                       show-overflow-tooltip></el-table-column>
      <el-table-column label="接待客服" align="center" width="100" prop="invoiceReception"/>
      <el-table-column label="卖家备注" align="center" width="150" show-overflow-tooltip
                       prop="invoiceApiSellOrders[0].sellerRemark"></el-table-column>
      <el-table-column label="订单金额" align="center" width="100"
                       prop="invoiceApiSellOrders[0].orderAmount"></el-table-column>
      <el-table-column label="操作" min-width="250" align="center" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click.native.stop="checkInvoice(scope.row)"
            v-if="scope.row.invoiceState =='1' || scope.row.invoiceState === '2'  || scope.row.invoiceState == '3' || scope.row.invoiceState =='4'|| scope.row.invoiceState =='5' || scope.row.invoiceState == '-1'"
            v-hasPermi="['invoice:order:view']"
          >查看发票
          </el-button>

          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click.native.stop="editInvoice(scope.row)"
            v-if="scope.row.invoiceState == '0' "
            v-hasPermi="['invoice:order:edit']"
          >编辑
          </el-button>
      </el-table-column>





 /*表格table事件*/
    handClick(row) {
    
    },

再el-table 标签中使用事件:@row-click="handClick"

但是需要注意 此事件会影响到正常的其他操作按钮 ,导致多个方法执行

再@click事件上加上  .native.stop  即可避免这种情况

原文链接:https://blog.csdn.net/c601757850/article/details/122105263

栏目分类
最近更新