【前端10】vue3中使用handsontable动态加载数据

最新推荐文章于 2024-09-14 13:56:48 发布

Noyade

最新推荐文章于 2024-09-14 13:56:48 发布

阅读量480

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/Noyade/article/details/140043227

版权

<template>
    <el-container>
      <el-header>
        <p class="title">用户管理 User Management</p>
        <el-input v-model="input" size="large" placeholder="Please input" :prefix-icon="Search" />
        <el-button>Export</el-button>
      </el-header>
      <div class="main">
        <hot-table ref="hotTableComponent" :settings="hotSettings"></hot-table>
      </div>
    </el-container>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { Search } from '@element-plus/icons-vue';
  import { HotTable } from '@handsontable/vue3';
  import { registerAllModules } from 'handsontable/registry';
  import 'handsontable/dist/handsontable.full.css';
  import { get_user_data } from '@/service/admin';
  
  const input = ref('');
  const  hotTableComponent = ref(null); // Handsontable 实例的引用

  const hotSettings = ref({
    data:[],
    licenseKey: 'non-commercial-and-evaluation',
    height: 'auto',
    rowHeights: 30,
    manualColumnResize: true,
    stretchH: 'all',
    colHeaders: [
      '用户',
      'cost center',
      '订阅模式',
      '应收金额',
      '实收金额',
      '有效期',
      '金额是否确认',
    ],
    columns: [
      { data: 'user_name', type: 'text' },
      { data: 'cost_center', type: 'text' },
      { data: 'subscription_model', type: 'text' },
      { data: 'amount_receivable', type: 'text' },
      { data: 'paid_amount', type: 'text' },
      { data: 'period', type: 'text' },
      { data: 'confirmed', type: 'text' },
    ],
    dropdownMenu: true,
    contextMenu: true,
    multiColumnSorting: true,
    filters: true,
    rowHeaders: true,
    autoColumnSize: true,
  });

  onMounted(async () => {
  try {
    const apiData = await get_user_data(); // 替换为实际的接口调用方法
    hotSettings.value.data=apiData.list
    //data.value=apiData.list
    hotTableComponent.value.hotInstance.loadData(apiData.list)
    console.log(hotSettings.value.data,"hotSettings.value.data ");
    
  } catch (error) {
    console.error('Failed to fetch user data:', error);
  }
});
  
  // 注册 Handsontable 的模块
  registerAllModules();
  </script>

主要通过 hotTableComponent.value.hotInstance.loadData(apiData.list)s