f-table-plus v0.0.3

Vue 3 CRUD模板

描述：

对element plus的组件进行二次封装， 能完成快速表格操作

基本用法

基本用法 ​

<script setup lang="ts">
import { ref } from "vue";

const columns = ref([
	{
		label: "序号",
		type: "index",
	},
	{
		label: "学号",
    name: 'id'
	},
	{
		label: "姓名",
    name: "name"
	},
	{
		label: "性别",
    name: "sex"
	}
]);

const records = ref([{
  id: 1,
  name: "小王",
  sex: '男'
}, {
  id: 2,
  name: "小徐",
  sex: '男'
}, {
  id: 3,
  name: "小虎",
  sex: '男'
}, {
  id: 4,
  name: "小昭",
  sex: '男'
},{
  id: 5,
  name: "小拍",
  sex: '男'
}])
const options = ref({})
</script>

<template>
	<f-table :columns="columns" :data="records" :options="options"> </f-table>
</template>

通过传入columns来设置每一行字段， data为数据， options为表格配置 ​

表格固定列

通过在columns中添加字段 position 来设置固定列

• left： 左侧固定列
• right： 右侧固定列

export const columns = [
	{
		label: "序号",
		type: "index",
		position: 'left'
	},
	{
		label: "学号",
		name: "id",
		position: 'left'
	},
	{
		label: "姓名",
		name: "name",
	},
	{
		label: "性别",
		name: "sex",
	},
	{
		label: "性别",
		name: "sex",
		width: '680'
	},
	{
		label: "性别固定列2",
		name: "sex",
		width: '680'
	},
	{
		label: "性别固定列1",
		name: "sex2",
		position: 'right'
	},
];

插槽

放入插槽有两种方法 1.直接放入

<template>
	<f-table :columns="columns" :data="records" :options="options"> 
    <template v-slot:name="{value, row}">
       <el-tag>插槽绑定的值：{{value}}</el-tag>
       <el-tag>这一行的值：{{row}}</el-tag>
    </template>
  </f-table>
</template>

2.在columns中放入

		
{
  	label: "学号",
		name: "id",
		position: 'left',
		render: ({item, data, h}) :any => {
			return h("span", item.label);
		},
	},

单选框/全选

<script setup>
  
const options = ref({
  selection: true
})
const oncheckBoxChange = (e: any) =>{
  console.log("e", e)
}

</script>

<template>
<f-table :columns="columns" :data="records" :options="options" @checkBoxChange="oncheckBoxChange"> 
  <template v-slot:name="{value, row}">
    <el-tag>插槽绑定的值：{{value}}</el-tag>
    <el-tag>这一行的值：{{row}}</el-tag>
</template>
</f-table>
</template>

目前只支持单页面全选 ​

在options中传入selection：true/false 为是否显示勾选框

@checkBoxChange(event)： 钩选checkbox会触发的方法

event: 返回当前表格钩选的数组

修改/删除按钮

在options中传入rowBtn为true则展示默认修改和删除

const options = ref({
  rowBtn:true,
})

隐藏修改/删除按钮

在option中传入updateHide为true即可隐藏修改按钮，传入deleteHide为true隐藏删除按钮

const options = ref({
  selection: true,
  rowBtn:true,
  updateHide: true,
  deleteHide: true
})

自定义右侧按钮

<template>
	<f-table>
		<template	v-slot:rowBtn="{row}">
			<div>自己的插槽按钮{{row}}</div>
		</template>
	</f-table>
</template>

点击修改会弹出当前修改列

删除

点击删除传入

	<f-table
		:columns="columns"
		:data="records"
		:options="options"
    @onDelect="onDelectFunc"
	>
		<template	v-slot:rowBtn="{row}">
			<div>自己的插槽按钮{{row}}</div>
		</template>
	</f-table>


<script setup>
const onDelectFunc = (event: any) =>{
  console.log("Table: ", event)
}
</script>

当点击确定传入onDelect事件