<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script>
<div id="app">
<template>
<el-table class="mt-15" stripe :data="detaileddataList" style="width: 100%">
<el-table-column fixed prop="key" label="" align="center" >
<template slot-scope="scope"><span class="keyname">{{scope.row.key}}</span></template>
</el-table-column>
<el-table-column
v-for="(column) in tableColumnList"
header-align="center"
:sortable="column.hasSort"
:key="column.prop + column.propName"
:prop="column.prop"
:label="column.propName"
align="center" :show-overflow-tooltip="true"
>
<template slot-scope="scope">
<el-button type="text" @click=openlog(scope.row[column.prop]) v-if=scope.row[column.prop].shifoudian=='0'>
{{scope.row[column.prop].name}}
</el-button>
<div v-else>
{{scope.row[column.prop].name}}
</div>
</template>
</el-table-column>
</el-table>
</template>
</div>
var Main = {
data() {
return {
"detaileddataList" :[
{
"key": "耗用粕",
"2024090620240912": {
"name":"1.11",
"canshu":"a",
"shifoudian":'0',
},
"2024091320240919": {
"name":"2",
"canshu":"b",
"shifoudian":'0',
},
"2024092020240926":{
"name":"3",
"canshu":"v",
"shifoudian":'0',
},
},
{
"key": "同比",
"2024090620240912": {
"name":"0.03",
"canshu":"d",
"shifoudian":'1',
},
"2024091320240919": {
"name":"0.42",
"canshu":"r",
"shifoudian":'1',
},
"2024092020240926":{
"name":"0.53",
"canshu":"w",
"shifoudian":'1',
},
},
],
"tableColumnList": [
{
"prop": "2024090620240912",
"propName": "2024-09-06 - 2024-09-12",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "2024091320240919",
"propName": "2024-09-13 - 2024-09-19",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "2024092020240926",
"propName": "2024-09-20 - 2024-09-26",
"propDescribtion": null,
"hasSort": false
}
],
}
},
methods: {
openlog(row) {
console.log('----!',row);
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
关键代码
<el-button type="text" @click=openlog(scope.row[column.prop])
{{scope.row[column.prop].name}}
</el-button>