vue3.x 作用域插槽

// 1. 在组件中定义插槽

      // v-slot指令是Vue2.6之后，作用域插槽的新语法，旧语法现在还保留，但3.0之后会移除。推荐新语法，简便写法是#son="{user}"
      // 这里的#default是element-plus默认的作用域插槽
      // element-plus UI 中的插槽导出的插槽数据是在scope.row中   不在scope中
          <template #default="scope">
            // 给插槽动态的绑定属性名称  并且把当前行的数据传递出去 接收的数据时名称也应为rows
            <slot :name="item.slotName" :rows="scope.row">
              {{ scope.row[item.prop] }}
            </slot>
          </template>


// 2. 在父组件中
      //  给名称为status的插槽替换数据
      <template #status="scope">
        // 对插槽传递过来的数据进行处理
        <el-button>{{ scope.rows.enable ? "启用" : "禁用" }}</el-button>
      </template>