封装table组件 | 增加自定义插槽功能

<table class="main">
        <tr>
            <th class="th" v-if="checkedShow" style="width:3%">
                <input type="checkbox" v-model="selectAll" 
                 @change="selectAllCheckbox"                         
                 :disabled="multiple==false">
            </th>
            <th v-for="(item, index) in option.column" :key="index" class="th"
               :style="{ width: item.width + '%' }">
                {{ item.label }}
            </th>
        </tr>
        <tr  v-for="(item, index) in reactiveTableData" :key="index" 
             @click="handleRowClick(item)">
            <td v-for="(context, i) in option.column" :key="i">
            </td>
        </tr>
</table>

由于手机端vant和uni 没有自己的table组件 需要自己封装的原生table 同时想增加自定义插槽功能

<table class="main">
        <!-- 以上省略 -->
        <tr v-for="(item, index) in reactiveTableData" :key="index" 
             @click="handleRowClick(item)">
            <td v-for="(context, i) in option.column" :key="i">

                <!-- 增加插槽功能 当列的标签是'customDisplay'时才使用插槽 -->
                <template v-if="context.tableDataprop == 'customDisplay'">
                       <slot name="customDisplay" :item="item">                        
                       {{item[context.tableDataprop]}}</slot> 
                       <!-- 将具名插槽放置在<td>标签内 -->
                </template>

            </td>
        </tr>
</table>

引用table组件时， 只需要传入列名

<template> 
        <VanTable :option="option" :tableData="tableData">
            <template v-slot:customDisplay="{ item }">
                <view v-if="item.content == 1">自定义内容1</view>
                <view v-if="item.content == 2">自定义内容1</view>
            </template>
</VanTable 
</template>

<script setup lang="ts">
        const option = ref({
    column: [
        // 省略其他传入的列
        {
            label: '自定义',
            tableDataprop: 'customDisplay', // 自定义插槽列
            width: 15,
        }
   ]
</script>