封装 element-plus 的 el-table-column，slot 里面的 el-switch 组件会在表格初始化的时候触发一次change事件？

Question

项目中用到了很多带 tooltip 提示的表头，所以想着把 el-table-column 封装下，支持 tooltip 参数。

下面是 TableColumnTooltip.vue 组件代码，封装了 el-table-column 支持 tooltip;

<script setup lang="ts">
import { QuestionFilled } from '@element-plus/icons-vue'
const props = defineProps<{ tooltip?: string, label?: string }>()
</script>
<template>
  <el-table-column :props="props">
    <template v-if="Boolean(tooltip)" #header>
      <div class="flex items-center">
        <div class="mr-1">{{ label }}</div>
        <el-tooltip>
          <template #content>
            <div class="max-w-xs">{{ tooltip }}</div>
          </template>
          <el-icon>
            <QuestionFilled />
          </el-icon>
        </el-tooltip>
      </div>
    </template>
    <template #default="{ row }">
      <slot :row="row"></slot>
    </template>
  </el-table-column>
</template>

使用的时候 List.vue

<script setup lang="ts">
import TableColumnTooltip from './componenets/TableColumnTooltip'
const list = ref([])
const handleToggle = () => {
    console.log('trigger')
}
</script>
<template>
<el-table :data="list">
  <el-table-column prop="name" label="名称"/>
  <TableColumnTooltip label="警告" tooltip="切换警告">
    <template #default="{ row }">
      <el-switch
        :model-value="row.warning"
        :active-value="1"
        :inactive-value="0"
        @change="handleToggle"
      />
    </template>
  </TableColumnTooltip>
</el-table>
</template>

但是 List.vue 渲染的时候虽然 list 数组没数据，但是 el-switch 的 change 事件执行了一次，就很怪？

Answer 1

目前的解决方法是在 TableColumnTooltip 组件中先判断 row 属性有值才渲染 slot。TableColumnTooltip中的 default slot 为什么会默认渲染一次等有空了看下源码再补充。

<template>
  <el-table-column :props="props">
    <template v-if="Boolean(tooltip)" #header>
      <div class="flex items-center">
        <div class="mr-1">{{ label }}</div>
        <el-tooltip>
          <template #content>
            <div class="max-w-xs">{{ tooltip }}</div>
          </template>
          <el-icon>
            <QuestionFilled />
          </el-icon>
        </el-tooltip>
      </div>
    </template>
    <template #default="{ row }">
        <slot v-if="row && Object.keys(row).length" :row="row"></slot>
    </template>
  </el-table-column>
</template>