获取三级菜单的值
<el-tree
:data="menus"
:props="defaultProps"
show-checkbox="true"
node-key="catId"
:default-expand-all="false"
:expand-on-click-node="false"
:default-expanded-keys="expandedkeys"
:draggable="draggable"
:allow-drop="allowDrop"
@node-drop="handleDrop"
ref="menuTree"
>
<!-- node: 当前节点(包括节点的各种属性) data:后台传递的节点数据, slot-scope卡槽机制 -->
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-button v-if="node.level <= 2" type="text" size="mini" @click="() => append(data)">增加</el-button>
<!-- 也可以这样写事件: @click="edit(data) 或者 @click="() => append(data) -->
<el-button type="text" size="mini" @click="edit(data)">修改</el-button>
<el-button
v-if="node.childNodes.length == 0"
type="text"
size="mini"
@click="() => remove(node, data)"
>删除</el-button>
</span>
</span>
</el-tree>
获取表格中每一行的数据
slot-scop 插槽机制 scope可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
label="日期"
width="180">
<!--slot-scop 插槽机制 scope可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据-->
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
label="姓名"
width="180">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>姓名: {{ scope.row.name }}</p>
<p>住址: {{ scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>