0.1.13 • Published 1 year ago
82tlh-table-demo v0.1.13
动态表格控件
支持以下功能:
- 支持表格列可以拖动顺序
- 支持表格列可以隐藏和显示
- 支持表格支持多列排序
- 支持拖动后的顺序、列宽和是否显示缓存到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;">
<div>查询</div>
<div>隐藏</div>
<div ref="set"></div>
<div ref="clearCache"></div>
</div>
<div style="border-top: 1px solid cadetblue">查询区域</div>
<hc-table ref="table" :data="tableData" border @cell-click="handleEvent" @sort-change="handleEvent" @multi-sort="multiSort" cacheName="userTable" :toolbar="set" :clearCache="clearCache">
<hc-table-column type="selection" align="center" fixed></hc-table-column>
<hc-table-column label="日期" prop="date" sortable="custom" align="center"></hc-table-column>
<hc-table-column label="姓名" prop="name" sortable="custom">
<template #default="scope">
<el-tag>{{scope.row.name}}</el-tag>
</template>
</hc-table-column>
<hc-table-column label="地址" prop="address">
<template #default="scope">
<el-tag type="danger">{{scope.row.address}}</el-tag>
</template>
</hc-table-column>
</hc-table>
<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 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>