快捷導(dǎo)航

hansontable在vue中的基本使用教程

更新時(shí)間：2022年10月27日 11:22:29 作者：遠(yuǎn)方除了遙遠(yuǎn)一無所有

handsontable是目前在前端界最接近excel的插件，可以執(zhí)行編輯，復(fù)制粘貼，插入刪除行列，排序等復(fù)雜操作，這篇文章主要介紹了hansontable在vue中的基本使用,需要的朋友可以參考下

簡介

Vue Handsontable是一個(gè)具有Spreadsheet外觀的Vue數(shù)據(jù)表格組件,是Handsontable的官方封裝。 Handsontable易于與任何數(shù)據(jù)源集成，并具有許多有用的功能，如數(shù)據(jù)綁定、驗(yàn)證、排序和強(qiáng)大的上下文菜單。

特點(diǎn)

多列排序
非連續(xù)選擇
過濾數(shù)據(jù)
導(dǎo)出文件
驗(yàn)證數(shù)據(jù)
條件格式
合并單元格
自定義單元格類型
凍結(jié)行/列
移動(dòng)行/列
調(diào)整大小行/列
隱藏行/列
上下文菜單
注釋
自動(dòng)填充選項(xiàng)

handsontable是目前在前端界最接近excel的插件，可以執(zhí)行編輯，復(fù)制粘貼，插入刪除行列，排序等復(fù)雜操作

代碼

Test.vue

<template>
  <div id="hansontable">
    <hot-table
      :data="data"
      :settings="hotSettings"
      ref="hotTableRef"
    ></hot-table>
  </div>
</template>

<script>
import Handsontable from 'handsontable'
import { HotTable } from '@handsontable/vue'
import 'handsontable/dist/handsontable.full.css'
import { registerAllModules } from 'handsontable/registry'

// register Handsontable's modules
registerAllModules()

import hotSettings from './hotSettings'

export default {
  components: {
    HotTable,
  },
  data() {
    return {
      // data: Handsontable.helper.createSpreadsheetData(10, 7),
      data: [
        { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
        { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
        { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
        { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
      ],
      hotSettings,
      hotInstance: null,
    }
  },
  mounted() {
    // 獲取實(shí)例
    this.hotInstance = this.$refs.hotTableRef.hotInstance
    const getDataAtRowProp = this.hotInstance.getDataAtRowProp
    // 示例：只允許單元格值為2019的數(shù)據(jù)進(jìn)行更改
    this.hotInstance.updateSettings({
      cells(row, col, prop) {
        const cellProperties = {}
        console.log(row, prop)
        if (getDataAtRowProp(row, prop) == 2019) {
          cellProperties.editor = false
        } else {
          cellProperties.editor = 'text'
        }
        return cellProperties
      },
    })
  },
}
</script>

<!-- 注意：這里不能加"scoped"，否則表頭的背景顏色無法設(shè)置 -->
<style>
.make-me-red {
  color: red;
}
.custom-table thead th {
  background-color: #d7f1e1;
}
</style>

hotSettings.js

import Handsontable from 'handsontable'

Handsontable.renderers.registerRenderer(
  'negativeValueRenderer',
  negativeValueRenderer
)

function negativeValueRenderer(
  instance,
  td,
  row,
  col,
  prop,
  value,
  cellProperties
) {
  Handsontable.renderers.TextRenderer.apply(this, arguments)

  // 示例1:如果單元格的值小于10，則添加類名
  if (parseInt(value, 10) < 0) {
    td.className = 'make-me-red'
  }

  // 如果單元格的值為空或者沒值
  if (!value || value === '') {
    td.style.background = '#EEE'
  } else {
    if (value === 'Nissan') {
      td.style.fontStyle = 'italic'
    }

    td.style.background = ''
  }
}

function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments)
  td.style.fontWeight = 'bold'
  td.style.color = 'green'
  td.style.background = 'orange'
}

const hotSetting = {
  licenseKey: 'non-commercial-and-evaluation',
  // colHeaders: true,
  // 列合并
  //    注意：在第一列的表頭是不能合并的
  // nestedHeaders: [
  //   ['Car', { label: 'Year', colspan: 5 }, 'Chassis color', 'Bumper color'],
  //   [
  //     'Country',
  //     { label: 'City', colspan: 3 },
  //     'Address',
  //     'Zip code',
  //     'MobileH',
  //   ],
  // ],
  // 列名
  colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
  // rowHeaders: true,
  rowHeights: 40,
  width: '100%',
  // height: 'auto',
  height: 400,
  // 是否可以手動(dòng)調(diào)整列大小
  manualColumnResize: true,
  // 將所有的列平均拉伸到父容器的寬度
  stretchH: 'all',
  // 右鍵下拉菜單
  // dropdownMenu: true,
  filters: true,
  dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
  // 列排序
  columnSorting: true,
  // 單元格的合并
  mergeCells: [{ row: 0, col: 0, rowspan: 2, colspan: 2 }],
  // 設(shè)置單元格的水平和垂直居中，并為表格添加自定義的類名
  className: 'htCenter htMiddle custom-table',
  // 單元格樣式設(shè)置
  cells(row, col) {
    const cellProperties = {}

    // 對(duì)第一行設(shè)置樣式，注意：不包括表頭
    //     方式1： 直接通過函數(shù)
    //     方式2： 字符串，通過hansontable的map映射使用渲染器
    if (row === 0) {
      cellProperties.renderer = firstRowRenderer // uses function directly
    } else {
      cellProperties.renderer = 'negativeValueRenderer'
    }
    return cellProperties
  },
  // 是否只讀
  // readOnly: true,
}

export default hotSetting