elment-ui中 给table表格 某项加点击事件

 

 

情况一：前端写表格

 

代码：

<template>

<el-table-column
        header-align="center"
        align="center"
        label="单据编号"
        prop="statementBaseNo"
>
    <template slot-scope="scope">
        <el-button type="text" @click="statementBaseNoJump(scope.row)">{{scope.row.statementBaseNo}}</el-button>
    </template>
</el-table-column>
</template>

<script>
//点击跳转页面

statementBaseNoJump(row) {

        this.$router.push({
            path: "/checkBillStatementSaleManageDetail",
            query: { refreshtarget: true, id: row.extId,billCheckType: row.billCheckType,ids: this.$route.query.id}
        });
}

</script>

情况二：后端写表格

<el-table-column
  v-for="(col, index) in localShowTableCols"
  :key="index + col.name"
  :fixed="col.fixable"
  :prop="col.name"
  :label="col.title"
  :min-width="col.columnWidth"
  show-overflow-tooltip
  header-align="center"
  align="center"
>
  <template slot-scope="scope">
    <el-button
            v-if="col.name === 'statementBaseNo'"
            @click="returnDetail(scope)"
            type="text"
            size="small"
            v-auth="4"
    >
      {{ scope.row[col.name] }}
    </el-button>
    <span v-else>{{ getValue(scope.row, col.name) }}</span>
  </template>
</el-table-column>


补充：localShowTableCols为动态列数据

statementBaseNo为单据编号

returnDetail为点击事件