vue写table（hansontable在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 Handsontables 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() { // 获取实例 this.hotInstance = this.$refs.hotTableRef.hotInstance const getDataAtRowProp = this.hotInstance.getDataAtRowProp // 示例：只允许单元格值为2019的数据进行更改 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"  


  


  


  ，否则表头的背景颜色无法设置 --> <style> .make-me-red { color: red; } .custom-table thead th { background-color: #d7f1e1; } </style>

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, // 是否可以手动调整列大小 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 }], // 设置单元格的水平和垂直居中


   




   




   




，并为表格添加自定义的类名 className: htCenter htMiddle custom-table, // 单元格样式设置 cells(row, col) { const cellProperties = {} // 对第一行设置样式 



 



 



 ，注意：不包括表头 // 方式1： 直接通过函数 // 方式2： 字符串                  ，通过hansontable的map映射使用渲染器 if (row === 0) { cellProperties.renderer = firstRowRenderer // uses function directly } else { cellProperties.renderer = negativeValueRenderer } return cellProperties }, // 是否只读 // readOnly: true, } export default hotSetting

声明：本站所有文章



    




    




    




，如无特殊说明或标注














，均为本站原创发布




 




 




 


。任何个人或组织                   ，在未征得本站同意时



     



     



     



，禁止复制
 




 




 




、盗用   

   

   

   、采集 

     

     

     

、发布本站内容到任何网站

  




  




  




、书籍等各类媒体平台
   

   

   

。如若本站内容侵犯了原著者的合法权益














，可联系我们进行处理     

     

     

   。