<template> <el-table ref="table" :data="list" class="table" border> <el-table-column align="center" type="index" /> <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text"> <template slot-scope="scope"> <span v-if="column.type!='button'">{{ scope.row[column.value] }}</span> <el-button v-if="column.type=='button'" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button> </template> </el-table-column> </el-table> </template> <script> export default { name: 'DeptAccessList', props: { list: { type: Array, default() { return [] } } }, data() { return { tableColumns: [ { text: '单位名称', value: 'deptName', type: 'text' }, { text: '上期结转数', value: 'lastCarryOver', type: 'button' }, { text: '本期应处置数', value: 'shouldProcess', type: 'button' } ] } }, methods: { showCaseList(row, value) { console.log(row, value) } } } </script>