hcfunds-components v1.2.8

动态表格控件

支持以下功能：

• 支持表格列可以拖动顺序
• 支持表格列可以隐藏和显示
• 支持表格支持多列排序
• 支持拖动后的顺序、列宽和是否显示缓存到localStorage
• 支持同一页面多个页面
• 支持工具栏外部排版
• 支持动态列

组件安装

npm install hcfunds-components --save

引入组件

import {createApp} from 'vue';
import App from '@/App.vue';
import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import HcComponents from 'hcfunds-components';

createApp(App).use(router).use(ElementPlus).use(HcComponents).mount('#app');

示例代码

<template>
	<div>
		<div ref="toolbar" style="display: flex;justify-content: flex-end;gap: 10px;">
			<el-button type="primary">查询</el-button>
			<el-button type="primary">新增</el-button>
			<div ref="set"></div>
			<div ref="clearCache"></div>
		</div>
		<el-divider/>

		<hc-table ref="table" :data="tableData" border show-set show-clear-cache @cell-click="handleEvent" @sort-change="handleEvent" @multi-sort="multiSort" cache-name="userTable">
			<hc-table-column type="selection" align="center" fixed/>
			<hc-table-column prop="date" label="日期" align="center" fixed/>
			<template v-for="(column, index) in columns" :key="index">
				<hc-table-column :label="column.name" :prop="column.prop" sortable="custom" align="center">
					<template #default="scope">
						<el-tag type="warning">{{ scope.row[column.prop] }}</el-tag>
					</template>
				</hc-table-column>
			</template>
		</hc-table>

		<el-divider/>
		<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
	</div>
</template>

<script setup>
import { ref } from 'vue'

const table = ref(null)
const set = ref(null)
const clearCache = ref(null)

const columns = [
	{ prop: 'name', name: '姓名' },
	{ prop: 'address', name: '地址' },
	{ prop: 'sex', name: '性别' },
];

const tableData = [
	{ date: '2016-05-01', name: 'Tom1', address: 'No. 181, Grove St, Los Angeles', sex: '男' },
	{ date: '2016-05-02', name: 'Tom2', address: 'No. 182, Grove St, Los Angeles', sex: '男' },
	{ date: '2016-05-03', name: 'Tom3', address: 'No. 183, Grove St, Los Angeles', sex: '男' },
	{ date: '2016-05-04', name: 'Tom4', address: 'No. 184, Grove St, Los Angeles', sex: '男' },
]

const handleEvent = (...args) => {
	// console.log(...args)
}

const multiSort = (...args) => {
	console.log('multiSort', ...args)
}

const toggleSelection = (rows) => {
	if (rows) {
		rows.forEach((row) => {
			table.value.toggleRowSelection(row)
		})
	} else {
		table.value.clearSelection()
	}
}
</script>