82tlh-table-demo

动态表格控件

支持以下功能：

• 支持表格列可以拖动顺序
• 支持表格列可以隐藏和显示
• 支持表格支持多列排序
• 支持拖动后的顺序、列宽和是否显示缓存到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>