最近使用了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=" 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=" 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.hh}}</a>
</template>
</el-table-column>
<!-- 最重要的代码结束 -->
<el-table-column prop="zh" label="账号" min-width="230" align='left'></el-table-column>
<el-table-column prop="zy" label="摘要" min-width="150" align='left'></el-table-column>
<el-table-column prop="rq" 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="hm" 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.hh = row.hh
this.formTable.hhid = row.hhid
this.formTable.hm = row.hm
this.formTable.khrq = row.rq
this.formTable.zh = row.zh
this.formTable.jyzy = row.zy
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的小伙伴，这也是我成长的知识小积累，欢迎大家一起讨论。