Element plus El-Table组件对插槽的二次封装(不会你直接找我)

需求

对element plus 的table组件进行二次封装，并基于slot的名字，进行当表格的某一列自定义，例如：对日期这一列进行标红色处理或增加操作按钮等。

一、先来看看插槽上绑定的参数

总共有如下几个参数：

row,column,$index,expanded,store

其中，当前行的数据绑定在row上，store的state上绑定了整张表的数据（类似于小型的pinia）。

{
    "row": {
        "date": "2016-05-04",
        "name": "Tom",
        "address": "No. 189, Grove St, Los Angeles"
    },
    "column": {
        "order": "",
        "id": "el-table_1_column_1",
        "type": "default",
        "align": null,
        "headerAlign": null,
        "showOverflowTooltip": false,
        "filteredValue": [],
        "filterPlacement": "",
        "isColumnGroup": false,
        "isSubColumn": false,
        "filterOpened": false,
        "sortable": false,
        "rawColumnKey": null,
        "label": "日期",
        "fixed": false,
        "resizable": true,
        "sortOrders": [
            "ascending",
            "descending",
            null
        ],
        "reserveSelection": false,
        "filterMultiple": true,
        "minWidth": 80,
        "realWidth": 323,
        "no": 0,
        "level": 1,
        "colSpan": 1,
        "rowSpan": 1
    },
    "$index": 0,
    "expanded": false,
    "store":{
		"mutations": {},
		"ns": {"namespace": 'el'},
		"states":{ ...}
	}
}

二、使用

在知道了el-table插槽上绑定了什么数据后，就好操作多了，先定义组件：

<template>
	// header、row 类名为对表的样式作统一处理
  <el-table ref="multipleTableRef" :data="tableData" table-layout="fixed"
    :scrollbar-always-on="true" max-height="500" header-cell-class-name="header" row-class-name="row" border>
    // 循环列表，prop表示表格数据中对应的字段名，label为列名
     <el-table-column v-for="item, index in options" :prop="item.prop" :label="item.label">
    // 1.是否需要多选操作
    <el-table-column v-if="isSelection" type="selection" width="55" /> 
    // 2.需要自定义插槽时，在options中传递slot字段名
      <template v-if="item.slot" #default="{row,column,$index}">
      	// 这里的name由options中的slot传递，比如此时slot值为date，则在父组件中使用#date接受数据即可
      	// row1,column,$index可以自定义字段a,b,c均可
        <slot :name="item.slot"  :row1="row" :column="column" :$index="$index"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang='ts'>
import { ref } from 'vue'

defineProps({
  isSelection: Boolean,
  options: Object,
})

interface User {
  date: string
  name: string
  address: string
}
const tableData: User[] = [
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
 
]


</script>

三、栗子

<template>
  <div class="user">
    <a-table :is-selection="true" :options="[{
      label: '日期', slot: 'date'
    }, { label: '姓名', slot: 'name' }, { label: '地址', prop: 'address' },]">
      // 打印在slot中定义的所有字段组成的一个对象
      <template #date="scope">
      // 此处随意定义操作按钮或标色等
        date {{ scope }}
      </template>
      // 解构在slot中定义的字段
      <template #name="{row1}">
        name {{ row1.name }}
      </template>
    </a-table>
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
import aTable from '@/components/a-table.vue';
</script>