element表格动态行列加点击事件

时间:2024-09-29 19:16:38

在这里插入图片描述

<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>