vue3 elementUi table自由渲染组件

前言

elementui中的table组件，表格中想要自由地渲染内容，是一种比较麻烦的事情，比如你表格中想要某一列插入一个button按钮，是不是要用插槽，那下一次某一列插入一个图片，又得新开一种插槽或者类别。

那么，有没有什么方法，能够通过配置，直接配置一个组件的方式，让表格的那一列直接渲染对应的组件。elementui table中并不提供这样的配置。所以需要开发人员自己封装。

CustomTable

在element UI 中Table组件的基础上，封装一个可以自定义渲染的table

<template>
  <!-- 表格 -->
  <el-table
    :data="tableData"
    v-loading="loading"
    :empty-text="'暂无数据'"
    v-bind="$attrs"
  >
    <!-- :border="true" -->
    <template v-for="column in tableColumn" :key="column?.label">
      <el-table-column v-if="column.cols" v-bind="{ ...column }">
        <!-- 列名合并，存在cols的情况下 -->
        <template v-for="col in column.cols" :key="column?.label + col?.label">
          <el-table-column v-bind="{ ...col }">
            <template #default="scope">
              <!-- 自定义render -->
              <span v-if="col?.render" :class="col?.class" :style="col?.style ? col.style : {}">
                {{ col?.render(scope.row[col.prop], scope.row) }}
              </span>
              <!-- 自定义render component 将当前列的数据和这一整行的数据都传给component函数 -->
              <div v-else-if="col?.component" v-html="renderVNode(col.component(scope.row[col.prop], scope.row))"> </div>
              <span
                v-else
                :style="col?.style ? col.style : {}"
                :class="col?.class"
                :title="scope.row[col.prop]"
                :data-message="scope.row[col.prop]"
                >{{ scope.row[col.prop] }}</span
              >
            </template>
          </el-table-column>
        </template>
      </el-table-column>
      <el-table-column v-else v-bind="{ ...column }">
        <template #default="scope">
          <!-- 自定义render字符串 当前列的数据和这一整行的数据都传给render函数-->
          <span v-if="column?.render" :style="column?.style ? column.style : {}" :class="column?.class">
            {{ column?.render(scope.row[column.prop], scope.row) }}
          </span>
		  <!-- 自定义render component 将当前列的数据和这一整行的数据都传给component函数 -->
          <div v-else-if="column?.component" v-html="renderVNode(column.component(scope.row[column.prop], scope.row))"></div>
          <span
            v-else
            :style="column?.style ? column.style : {}"
            :class="column?.class"
            :title="scope.row[column.prop]"
            :data-message="scope.row[column.prop]"
            >{{ scope.row[column.prop] }}</span
          >
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script lang="ts" setup name="customTable">
  const props = defineProps({
    tableData: {
      type: Array,
      default: () => [],
    },
    tableColumn: {
      type: Array<any>,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
  });
 
 const generateRandomString = (length) => {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
    const charactersLength = characters.length;
    let result = '';
    for (let i = 0; i < length; i++) {
      const randomIndex = Math.floor(Math.random() * charactersLength);
      result += characters.charAt(randomIndex);
    }
    return result;
  };
// 通过renderVNode 接收一个vnode节点来渲染component
const renderVNode = (vnode: VNode) => {
   const tempDiv = document.createElement('div');
   const parentDiv = document.createElement('div');
   const id = generateRandomString(10);
   parentDiv.appendChild(tempDiv);
   tempDiv.id = id;
   // 利用createApp和render将vnode挂载成一个新的app
   const Comp = createApp({
     render: () => vnode,
   });
   // 将这个新的vue app 挂载到对应的dom上
   nextTick(() => {
     // 但要放置到nextTick里面，以防止dom还没放置到table的对应位置，就先挂在了
     Comp.mount('#' + id);
   });
	
   // 返回一个html dom ，利用v-html挂载到table中对应的位置
   return parentDiv.innerHTML;
 };
</script >

如何使用

<template>
  <custom-table maxHeight="100vh" :tableColumn="tableColumn" :tableData="tableData" />
</template>

<script lang="ts" setup name="test">
import componentTest from '../componentTest.vue';
import customTable from '../components/customTable.vue';
const tableColumn = ref([
    {
      label: '名称',
      prop: 'name',
      align: 'center',
      minWidth: 130,
      fixed: true,
      component: (value, row) => {
        return h('div', { onClick: () => handleClick(row?.name) }, [
          h('span', { style: { fontSize: '14px', display: 'inline-block' } }, value),
          h('p', { class: 'dealer-scale' }, row?.scale),
        ]);
      },
    },
    {
      label: '订单',
      prop: 'order',
      component: (value, row) => {
        return h(componentTest, {title: value})
      },
      style: { color: '#C00017' },
    },
    { label: '本年', 
      prop: 'open', 
      style: { color: '#C00017' } 
    },
    { label: '费效比', 
      prop: 'efficiency', 
      style: { color: '#038810' },
      render: (value,rows) => {
        console.log(value, rows)
      	return value + '%'
      }
    },
    { label: '处罚', prop: 'punish', style: { color: '#0000aa' } },
  ]);
  const tableData = ref([
    // name order open efficiency punish scale
    {
      name: 'xxxx有限公司',
      order: '23455 万',
      open: '234 万瓶',
      efficiency: '1.3 %',
      punish: '3 次',
      scale: '10亿以上',
    },
    {
      name: '软件有限公司',
      order: '23456 万',
      open: '234 万瓶',
      efficiency: '1.3 %',
      punish: '3 次',
      scale: '5千万~1亿',
    },
  ]);
</script>

tableColumn 属性

h函数

function h(
  type: string | Component, // 元素/组件类型
  props?: object | null,    // 属性/Props
  children?: VNodeChildren  // 子节点（字符串、数组、插槽等）
): VNode

创建原生元素

import { h } from 'vue'

// 等价于 <div class="box" id="app">Hello</div>
h('div', { class: 'box', id: 'app' }, 'Hello')

// 带事件
h('button', { onClick: () => console.log('Clicked!') }, 'Click me')

创建组件

import MyComponent from './MyComponent.vue'

// 传递 props 和插槽
h(MyComponent, { 
  title: 'Demo',
  onClick: () => {} // 监听自定义事件
}, {
  default: () => h('span', '默认插槽'),
  footer: () => h('div', 'Footer 内容')
})

动态生成

const items = ['A', 'B', 'C']
h('ul', 
  items.map(item => h('li', item))
)