前端实战项目积累小知识（6）：vue--Element-UI  Table 表格指定列添加点击事件

Element-UI  Table 表格指定列添加点击事件

最近使用了Element-UI中的Table表格，因为需求需要在指定的列点击跳转，所以必须添加个点击事件，我这里是弹框展示table再点击跳转的，如图所示：

下面是我实现具体的代码(只是代码的一部分，我删减出来的)

<template>
     <el-dialog custom-class="m-dialog-addAminMsg" title="案件列表" width="940px" :visible.sync="caseListDialog" :close-on-click-modal="false" :show-close="false">
                <div class="m-search"  align='right' style="margin-bottom:10px">
                    <el-input placeholder="请输入关键字" style="width: 270px;margin-right:10px" v-model="searchAh"  size="small"></el-input>
                    <el-button type="primary" @click="searchCaseListAh"  size="small">搜索</el-button>
                </div>
                <el-table 
                    :data="caseData"   
                    :row-style="$store.getters.tableRowStyle" 
                    :header-cell-style="{background:'#eef1f6',color:'#606266'}" 
                    highlight-current-row
                    height="256" 
                    style="width: 100%"
                    @current-change="handleCurrentChange" 
                >
                    <!-- 最重要的代码开始 -->
                    <el-table-column prop="ah" label="案号" min-width="230" align='left'>
                        <template slot-scope="scope">
                            <a @click="cancelDialog(scope.row)" style="color:blue;cursor:pointer">{{scope.row.ah}}</a>
                        </template>
                    </el-table-column>
                    <!-- 最重要的代码结束 -->
                    <el-table-column prop="jgzh" label="监管账号" min-width="230" align='left'></el-table-column>
                    <el-table-column prop="jyzy" label="交易摘要" min-width="150" align='left'></el-table-column>
                    <el-table-column prop="khrq" label="开户日期" min-width="150" align='left'></el-table-column>
                    <el-table-column prop="tsrq" label="推送日期" min-width="150" align='left'></el-table-column>
                    <el-table-column prop="zhhm" label="账户户名" min-width="150" align='left'></el-table-column>
                </el-table>
                <el-pagination @current-change="chageCurrentAHPage" :current-page="currentPage2" :page-size="pageSize2" background layout="total, prev, pager, next" :total="total2" align='right'></el-pagination>
            </el-dialog>

</template>
<script>
import {api} from '@/api/'
export default {
  name: 'BillingApplication',
  data () {
    return {   
      currentPage2: 1, // 当前页
      pageSize2: 10, // 每页总条数
      total2: 0, // 总条数
      caseData: [],//案件列表
      caseListDialog: false, //案件选择弹框
      choseAHData:{},//选择的案件
      searchAh: "",//填写案件搜索
    }
  },
  created () {
  },
  mounted () {
  },
  computed: {
  },
  methods: {

    // 确定选择案件
    cancelDialog(row) {
        this.formTable.ah = row.ah
        this.formTable.ajid = row.ajid
        this.formTable.zhhm = row.zhhm
        this.formTable.khrq = row.khrq
        this.formTable.jgzh = row.jgzh
        this.formTable.jyzy = row.jyzy
        this.formTable.beizhu = row.beizhu
        this.currentPage2 = '1'
        this.pageSize2 = '10'
        this.searchAh = ''
        this.caseListDialog = false;
    },
   
    // 新增选择案号当前页
    chageCurrentAHPage(val) { 
        this.currentPage2 = val 
        this.pageAjJbxxZhxx()
    },
    // 案件查询
    pageAjJbxxZhxx () {
        let self = this
        let ah = ""
        let params = {
            ah: self.searchAh, // 案号
            fszt: '50', // 状态
            pageNumber: self.currentPage2,
            pageSize: self.pageSize2
        }
        api.pageAjJbxxZhxx(params).then((res) => {
            self.caseData = res.rows
            self.total2 = res.total
        })
    },
  },
    
</script>

<style lang="scss" scoped>
    ::v-deep .m-dialog-addAminMsg {
        .el-dialog__header {
            padding: 20px 20px 12px;
            border-bottom: 1px solid #EBEEF5;
            text-align: left;
            .el-dialog__title {
                font: normal bold 16px MicrosoftYaHei;
            }
        }
        .el-dialog__body {
            max-height: 360px;
            overflow: auto;
            .el-form-item {
            margin-bottom: 10px;
                &:last-of-type {
                    margin-bottom: 0;
                    .el-form-item__content {
                        // text-align: right;
                        font-size: 12px
                    }
                }
            }
        }
        .el-dialog__footer{
            border-top: 1px solid #EBEEF5
        }
    }
 </style>

希望能帮到正在学习Element的小伙伴，这也是我成长的知识小积累，欢迎大家一起讨论。