二次封装element Plus table组件

该组件用于快速创建表单，大量减少dom的书写，后续可根据需求再添加属性

<template>
	<el-table style="width: 100%" v-bind="$attrs">
		<el-table-column
			v-for="item in props.columns"
			:key="item.prop"
			:fixed="item.fixed"
			:label="item.label"
			:prop="item.prop"
			:show-overflow-tooltip="!item.noTooltip"
			:style="{ overflow: 'hidden' }"
			:type="item.type || 'default'"
			:width="item.width"
		>
			<template #default="scope: { row: any, $index: number }">
				<!--columns配置btnS自动渲染按钮-->
				<div v-if="item.btnS">
					<div v-for="i in item.btnS" :key="i.label" style="display: inline-block">
						<el-button
							v-if="(typeof i.isShow === 'function' && i?.isShow(scope.row)) || !i?.isShow"
							:key="i.label"
							v-auths="i.auths || []"
							v-prevent-re-click
							:class="[i.class, 'btnDefaultClass', 'mr-[8px]']"
							:disabled="i.disabled"
							:size="i.size || 'small'"
							link
							type="primary"
							@click="i.onClick(scope)"
						>
							{{ typeof i.label === 'string' ? i.label : i.label(scope.row) }}
						</el-button>
					</div>
				</div>
				<!--columns配置ilk = custom 可以自定义渲染内容,其中style如果不配置active方法则渲染静态样式，否则可以根据数据动态渲染样式-->
				<div v-else-if="item.ilk === 'custom'">
					<!-- 如果有点击事件传入并且有按钮权限则走button否则直接span展示 -->
					<el-button v-if="item?.onClick && auths(item.auths || [])" v-prevent-re-click link type="primary" @click="item.onClick(scope.row)">
						{{ item.text ? item.text({ label: scope.row[item.prop], data: scope.row }) : scope.row[item.prop] }}
					</el-button>
					<span v-else>
						{{ item.text ? item.text({ label: scope.row[item.prop], data: scope.row }) : scope.row[item.prop] }}
					</span>
				</div>

				<!-- columns配置ilk= statusDisplay则渲染状态样式，根据text是否存在渲染图标加文字样式或者switch样式  -->
				<div v-else-if="item.ilk === 'statusDisplay'">
					<span :class="item.text(scope.row).class">
						{{ item.text(scope.row).label }}
					</span>
				</div>
				<div v-else-if="item.ilk === 'switch'">
					<div v-if="(typeof item?.show === 'function' && item?.show(scope.row)) || !item?.show">
						<el-switch
							v-if="auths(item.auths || [])"
							v-model="scope.row[item.switchObj.onOff]"
							:active-text="item.switchObj.activeText"
							:inactive-text="item.switchObj.inactiveText"
							inline-prompt
							@change="(val:any) => {item.onChange(val, scope.row)}"
						/>
						<span v-else>{{ item.txt(scope.row) }}</span>
					</div>
				</div>
				<span v-else-if="item.type !== 'index' && !item.ilk">{{ scope.row[item.prop] || '--' }}</span>
			</template>
		</el-table-column>
	</el-table>
</template>

/**
 * 该组件主要是用于实现由搜索栏和表格组成的页面，elementPlus表单自带的属性可通过透传直接配置，不需要用prop额外接收
 * @typedef {Array} columns - 表格的配置项
 * @property {string} prop - 表格的prop
 * @property {string} label - 表格的名字
 * @property {string} fixed - 固定某一列
 * @property {number} width - 表格的宽度
 * @property {boolean} autoSerial - 是否展示序号
 * @property {string} ilk - 根据该字段可配置以封装的样式如
 * @property {Array} btnS - 表格的功能按钮配置
 * @property {boolean} btnS.isShow - 根据数据类型可渲染按钮是否展示或者什么状态下展示或隐藏
 * @property {Function} btnS.onClick - 按钮的点击事件
 * @property {string} btnS.class - 自定义按钮的className
 * @property {string} btnS.size - 按钮的大小
 * @property {boolean} btnS.disabled - 按钮是否禁用
 * @property {object} switchObj - 状态是switch开关时的属性，内部包括activeText、inactiveText分别代表开启和关闭展示的文字
 * @property {function} auths 控制权限的返回true、false，如果返回false则直接展示文字文字有txt方法渲染
 * */
// 按钮权限控制
import { auths } from '/@/utils/authFunction';

const props: any = defineProps({
	columns: { type: Array, default: () => [] },
	tableData: { type: Array, default: () => [] },
});