关于插槽

Question

老师好！
用插槽的原因是因为element-plus中无法渲染图像（只渲染出来链接）的原因吧？
这个这个地方没有定义子组件，用了默认插槽的吧？
插槽一般用于什么场景呢？我总感觉这里用怪怪的，可能少见多怪了。

<template>
  <div class="user-manage-container">
    <el-card class="header">
      <div>
        <el-button type="primary"> {{ $t('msg.excel.importExcel') }}</el-button>
        <el-button type="success">
          {{ $t('msg.excel.exportExcel') }}
        </el-button>
      </div>
    </el-card>
    <el-card>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="#" type="index" />
        <el-table-column prop="username" :label="$t('msg.excel.name')">
        </el-table-column>
        <el-table-column prop="mobile" :label="$t('msg.excel.mobile')">
        </el-table-column>
        <el-table-column :label="$t('msg.excel.avatar')" align="center">
          <template v-slot="{ row }">
            <el-image
              class="avatar"
              :src="row.avatar"
              :preview-src-list="[row.avatar]"
            ></el-image>
          </template>
        </el-table-column>
      

Answer 1

Sunday 2023-05-19 22:45:29

你好

这个主要是插槽的作用，你可以先看下 vue 的官方文档中对插槽的解释，然后再看后续的回答：https://cn.vuejs.org/guide/components/slots.html#slots 

根据文档我们可以知道，插槽本身是《从父组件中插入一块视图到指定的子组件区域中》，在 element 中我们也是使用该方式指定了 element 中指定区域的视图。

• 提问者 清显36 #1

  okok

Answer 2

提问者 清显36 2023-05-19 19:57:00

<template>
  <el-row class="demo-avatar demo-basic">
    <el-col :span="12">
      <div class="sub-title">circle</div>
      <div class="demo-basic--circle">
        <div class="block">
          <el-avatar :size="50" :src="circleUrl" />
        </div>
        <div v-for="size in sizeList" :key="size" class="block">
          <el-avatar :size="size" :src="circleUrl" />
        </div>
      </div>
    </el-col>
    <el-col :span="12">
      <div class="sub-title">square</div>
      <div class="demo-basic--circle">
        <div class="block">
          <el-avatar shape="square" :size="50" :src="squareUrl" />
        </div>
        <div v-for="size in sizeList" :key="size" class="block">
          <el-avatar shape="square" :size="size" :src="squareUrl" />
        </div>
      </div>
    </el-col>
  </el-row></template>
  
  
  <script lang="ts" setup>import { reactive, toRefs } from 'vue'const state = reactive({
  circleUrl:
    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  squareUrl:
    'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  sizeList: ['small', '', 'large'] as const,})const { circleUrl, squareUrl, sizeList } = toRefs(state)</script>

这是element-plus官方的文档，好像并没有用插槽？这里和课程是哪里有不一样的地方呢？

• 提问者 清显36 #1

  查看关于el-card的文档的时候，又用到插槽了，大大的疑问