「slot、slot-scope与v-slot替换 」
slot、slot-scope已经被弃用,所以推荐使用v-slot进行替换
// slot-scope 弃用写法
<el-table-column label="状态" prop="mg_state">
<template slot-scope="scope">
<el-switch v-model="scope.row.mg_state">
</el-switch>
</template>
</el-table-column>
// v-slot写法
<template v-slot:default="scope">
<el-switch v-model="scope.row.mg_state">
</el-switch>
</template>
<slot>
元素有一个特殊的 attribute:name
。这个 attribute 可以用来定义额外的插槽:
一个不带 name
的 <slot>
出口会带有隐含的名字“default”。
在向具名插槽提供内容的时候,我们可以在一个 <template>
元素上使用 v-slot
指令,并以 v-slot
的参数的形式提供其名称:
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
// 现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。
// user 是 current-user组件内部才能访问到的,所以为了让 user 在 current-user 的父级还能访问到,可以将user作为 <slot> 元素的一个 attribute 绑定上去
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
绑定在 <slot>
元素上的 attribute 被称为插槽 prop。现在在父级作用域中,我们可以使用带值的 v-slot
来定义我们提供的插槽 prop 的名字:
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
**scope.row 就是指当前行的数据**
--element-ui