前端實戰項目積累小知識（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的小夥伴，這也是我成長的知識小積累，歡迎大家一起討論。