ElementUI [1] The use of the default slot of the elementUI component library (#default)

ElementUI [1] The use of the default slot of the elementUI component library (#default)

---

foreword

When using the elementUI component library, we often encounter components with default slots, and we need to rewrite those with default slots, because in the next functions such as deletion and addition, functions need to pass parameters.

---

1. ElementUI based on vue2

For example: the default slot in the table component slot-scope="scope", here is the old version, if we write it like this, it will report an error.

	<template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>

Here it needs to be rewritten as:
1. The first way of writing

    <template #defalut="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>

2. The second way of writing

	 <template #defalut>
        <el-button
          size="mini"
          @click="handleEdit({row})">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete({row})">Delete</el-button>
      </template>

3. The third way of writing

  	 <template #defalut="{row}">
        <el-button
          size="mini"
          @click="handleEdit(row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(row)">Delete</el-button>
      </template>

2. ElementUI (element-plus) based on vue3

#default="scope""For example: the default slot or , in the table component #default.

	  <template #default>
        <el-button link type="primary" size="small" @click="handleClick"
          >Detail</el-button
        >
        <el-button link type="primary" size="small">Edit</el-button>
      </template>

	<template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>

Here it needs to be rewritten as:
1. The first way of writing

    <template #default='scope'>
        <el-button link type="primary" size="small" @click="handleClick"
          >Detail</el-button
        >
        <el-button link type="primary" size="small">Edit</el-button>
      </template>

2. The second way of writing

	 <template #defalut>
        <el-button
          size="mini"
          @click="handleEdit({row})">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete({row})">Delete</el-button>
      </template>

3. The third way of writing

  	 <template #defalut="{row}">
        <el-button
          size="mini"
          @click="handleEdit(row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(row)">Delete</el-button>
      </template>

Summarize

The default slot usage methods of the two versions are the same, and the three ways of passing parameters are also the same.