vue3在封装的表格中使用具名插槽改变特定内容改变

效果如图

代码如下

子组件代码

子组件文件名称为ordTable

<el-table-column
        v-for="(item, index) in tableHeader"
        :key="index"
        :type="item.type"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :align="item.align || 'center'"
        :show-overflow-tooltip="true"
        :formatter="item.formatter"
        :sortable="item.sort"
      >
        <!-- 这里的template是否需要根据使用页面传过来的布尔值来判断 -->
        <template v-if="item.template" #default="scope">
          <!-- 插槽 -->
          <slot v-if="item.slot" :name="item.slot" :scopeData="scope">{{scope.row.type}} </slot>

        </template>
      </el-table-column> 

父组件部分使用组件插槽代码

//使用封装的组件的dome
<ord-table
 :index="false"
  :tableData="tableDataTour"
  :tableHeader="tableHeaderTour"
  :height="'31vh'"
>
	//使用具名插槽
	<template v-slot:deal="slotProps">
	  <span v-if="slotProps.scopeData.row.deal=='已处理'" class="font_col_green">{{slotProps.scopeData.row.deal}}</span><!-- 已处理 -->
	  <span v-if="slotProps.scopeData.row.deal=='未处理'" class="font_col_red">{{slotProps.scopeData.row.deal}}</span><!-- 未处理 -->
	</template>
</ord-table>

//使用封装的组件的js
<script setup>
//引入子组件
import ordTable from '@/components/ordTable'

//表格头部数组
const tableHeader = reactive([
  {
    prop: "index",
    label: "序号",
  },
  {
    prop: "parts",
    label: "部件",
    sort:true
  },
  {
    prop: "problem",
    label: "问题",
  },
  {
    prop: "duty",
    label: "责任岗位",
  },
  {
    prop: "deal",
    label: "处理情况",
    sort:true,
    isDeal:true,
    template:true, //插槽开启
    slot:"deal" //插槽名称
  },
]);
//表格内容数据
const tableData = [
  {
    index: "1",
    parts: "底盘",
    problem: "地盘问题",
    duty: "班组巡查岗",
    deal: "已处理",
  },
   {
    index: "2",
    parts: "底盘",
    problem: "地盘问题",
    duty: "班组巡查岗",
    deal: "未处理",
  }
];
</script >