<el-table :data="tableData" style="width: 100%" border> <!-- <el-table-column label="id" prop="1" align="center"></el-table-column>--> <!--渲染账号名称--> <el-table-column label="账号名称" prop="name" align="center"></el-table-column> <!--渲染时间--> <el-table-column align="center" v-for="item in time" :label="item" :prop="item"> <!--渲染表格里面的数据--> <template slot-scope="scope"> <el-popover trigger="hover" placement="top" v-for="(row,index) in scope.row[item]" :key="index"> <p>任务名称: {{ row.name }}</p> <p>发布时间: {{ row.start_time }}</p> <p>任务状态: {{ row.status_name }}</p> <div slot="reference" class="name-wrapper" style="margin-top: 10px"> <el-tag size="medium">{{ row.name }}</el-tag> </div> </el-popover> </template> </el-table-column> </el-table>
2父组件
app.vue
<template> <div id="app"> <h3>{{name}}</h3> <!-- 子组件 --> <mongo @eat='eat'/> </div> </template> <script> import Mongo from "./components/Mongo"; export default { name: "app", data() { return { name: "" }; }, methods: { eat(fruit) { console.log("父组件接收事件"); this.name = fruit; } }, components: { Mongo } }; </script> <style> </style>