通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据,
slot-scope="scope" 取到当前单元格
scope.row 获得当前的行数据
scope.$index 当前下标
添加图片
<el-table stripe="true" :data="tableData" style="width: 100%" > <el-table-column prop="date" label="模型名称"> </el-table-column> <!-- //图片 --> <el-table-column label="公式"> <template slot-scope="scope" v-if="scope.row.img"> <el-popover placement="top-start" title="" trigger="hover"> <img :src="scope.row.img" alt="" /> <img slot="reference" :src="scope.row.img" style="width: 100px; height: 40px" /> </el-popover> </template> </el-table-column> </el-table>
添加按钮弹窗
1.<el-table-column prop="address" label="指标因子"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" >查看</el-button > //scope.row获得当前的行数据,scope.$index当前下标 </template> </el-table-column> <script> handleEdit(index, row) { this.$alert(`111`, "指标因子", { confirmButtonText: "确定", }); }, </script>