vue3 element plus el-table封装(二)

上文是对el-table的基本封装,只能满足最简单的应用,本文主要是在上文的基础上增加slot插槽,并且对col插槽进行拓展,增加通用性

// BaseTable.vue

js 复制代码
<template>
  <el-table>
    <template v-for="name in tableSlots" :key="name" #[name]>
      <slot :name="name"></slot>
    </template>
    <el-table-column v-for="(col,index) in $attrs.config" :key="index" v-bind="col">
      <template v-if="col.slot" #[getColSlot(col)]="scope" >
        <slot :name="col.slot" v-bind="scope"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts" setup>
const slots=useSlots();
const tableSlots=computed(()=>{
  // 原生el-table插槽只有default,append,empty
  // 原生el-table-column插槽只有table插槽只有default,header
  // 这里将header单独处理,认为是col的插槽,从table插槽中排除
  return Object.keys(slots).filter(name=>name!=='header')
})
const getColSlot=(col)=>{
  return col.slot==='header'?'header':'default'
}
</script>

//index.vue

js 复制代码
<template>
  <BaseTable :config="config" :data="tableData" :style="{width:'800px'}">
    <template #status="scope">
      <el-text :type="scope.row.status.type ">{{ scope.row.status.content }}</el-text>
    </template>
    <template #btn="scope">
      <el-button type="primary">{{ scope.row.btn }}</el-button>
    </template>
    <!-- 如有多个类似slot,也可以用如下方式渲染 -->
    <!-- <template  v-for="(col,index) in config.filter(item=>item.slot && item.slot!=='header')" :key="index" #[col.slot]="scope">
      <el-button type="primary">{{ scope.row.btn }}</el-button>
    </template> -->
    <template #header="scope">
      <el-button type="primary">{{ scope.column.label }}</el-button>
    </template>
  </BaseTable>
</template>

<script lang="ts" setup>
import BaseTable from './BaseTable.vue'
const config=[
  {
    type:'selection'
  },
  {
    prop: 'date',
    label:'日期',
    width:'180'
  },
  {
    prop: 'name',
    label:'姓名',
  },
  {
    prop: 'status',
    label:'状态',
    slot:'status',
    width:'180'
  },
  {
    prop: 'btn',
    label:'操作',
    slot:'btn',
    width:'180'
  },
  {
    prop: 'header',
    label:'按钮header',
    slot:'header',
    width:'180'
  },
];
const tableData = [
  {
    date: '2016-05-03',
    name: '张三',
    status:{content:'工作',type:'success'},
    btn: 'confirm',
  },
  {
    date: '2016-05-02',
    name: '李四',
    status:{content:'出差',type:'primary'},
    btn: 'confirm',
  },
  {
    date: '2016-05-04',
    name: '王五',
    status:{content:'休假',type:'danger'},
    btn: 'confirm',
  },
]
</script>
复制代码
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/dad5e7be52c84c12997da0829cdf9178.png)
相关推荐
索迪迈科技1 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
一朵梨花压海棠go2 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
一只小风华~4 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
十碗饭吃不饱4 小时前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5
Zz_waiting.4 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
切糕师学AI4 小时前
前后端分离架构中,Node.js的底层实现原理与线程池饥饿问题解析
前端·vue.js·node.js
每天吃饭的羊5 小时前
state和ref
前端·javascript·react.js
GEO_YScsn5 小时前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow
GISer_Jing5 小时前
滴滴二面(准备二)
前端·javascript·vue·reactjs
摇滚侠5 小时前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript