vue-handsontable常用配置项

hotSettings ： {data: this.objectData,// data: HandsontablePro.helper.createSpreadsheetData(100, 50),// data: this.getDate(),width: 800, // 宽height: 350, // 高// 标题操作rowHeaders: ['ID', 'Name', 'Address'], // 每列的标题，如果不够，则用大写字母补充colHeaders: ['ID', 'Name', 'Address', 'Another long label'], // 每列的标题，如果不够，则用大写字母补充rowHeaders: false, // 生效colHeader: true, // 显示顶标题, 经测试。并不生效rowHeader: true, // 显示左标题, 经测试。并不生效colWidths: 100, // 单元格宽rowHeights: 23, // 单元格高colWidths: [45, 100, 160, 60, 80, 80, 80], // 可以批量设置rowHeights: [50, 40, 100], // 批量设置colWidths: (col) => { console.log(`colWidths的回调：第几列${col}`); if (col === 2) return 100 },nestedHeaders: [['A', { label: 'B', colspan: 8 }, 'C'],['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],['H', { label: 'I', colspan: 2 }, { label: 'J', colspan: 2 }, { label: 'K', colspan: 2 }, { label: 'L', colspan: 2 }, 'M'],['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W']],collapsibleColumns: [{ row: -4, col: 1, collapsible: true },{ row: -3, col: 1, collapsible: true },{ row: -2, col: 1, collapsible: true },{ row: -2, col: 3, collapsible: true }],// ! 行操作fixedRowsTop: 2, // 固定的行fixedColumnsLeft: 3, // 固定的列fixedRowsBottom: 2, // 固定底行stretchH: "all",  // 拉伸行，可选值为，all 拉伸所有，none 不拉伸，last 拉伸最后一行manualColumnResize: true, // 列拉伸,调整大小manualRowResize: true, // 行拉伸,调整大小manualColumnMove: true, // 拖动交换列manualRowMove: true, // 拖动交换行hiddenRows: { // 隐藏行rows: [0, 1],indicators: false, // 官网说必须为true 才会隐藏，然而实际上并不是copyPasteEnabled: false // 为false 时跳过复制},hiddenColumns: { // 隐藏列columns: [3, 5, 9],indicators: true},headerTooltips: true, // 提示headerTooltips: { // 提示rows: true,columns: true,onlyTrimmed: true},startRows: 5,startCols: 5,minSpareRows: 1, // 下方总是空一行minSpareCols: 1, // 右方总是空一行stretchH: 'all',// 行相关事件beforeColumnMove: this.beforeColumnMove, // 列被移动之前触发afterColumnMove: this.afterColumnMove, // 列顺序被移动后触发afterRowMove: this.afterRowMove, // 行被移动后触发beforeRowResize: this.beforeRowResize, // 行拉伸之前触发afterRowResize: this.afterRowResize, // 行拉伸后触发beforeColumnResize: this.beforeColumnResize, // 列拉伸之前触发afterColumnResize: this.afterColumnResize, // 列拉伸之后触发beforeRemoveCol: this.beforeRemoveCol, // 列被移动前触发beforeRemoveRow: this.beforeRemoveRow, // 行被移动前被触发afterRemoveCol: this.afterRemoveCol, // 列被移动后触发afterRemoveRow: this.afterRemoveRow, // 行被移动后触发beforeCut: this.beforeCut, // 剪切之前触发afterCut: this.afterCut, // 剪切之后触发beforeCopy: this.beforeCopy, // 复制之前触发afterCopy: this.afterCopy, // 复制之后触发beforePaste: this.beforePaste, // 粘贴之前触发afterPaste: this.afterPaste, // 粘贴之后触发afterCreateCol: this.afterCreateCol, // 插入列后触发，向上和向下插入都是这个参数1是新行索引，参数2 是旧行索引，afterCreateRow: this.afterCreateRow, // 插入行后触发，向上和向下插入都是这个参数1是新行索引，参数2 是旧行索引，afterDestroy: this.afterDestroy, // 销毁Handsontable实例后被调用afterInit: this.afterInit, // Handsontable实例被初始化后调用beforeInit: this.beforeInit, // Handsontable实例被初始化前调用beforeRender: this.beforeRender, // 渲染前触发afterRender: this.afterRende.bind(this, isForced), // 表格渲染后触发 isForced：当其值为true表示是通过改变配置或数据引起的渲染，当值为false时表示通过滚动或移动、选中引起的渲染afterRenderer: this.afterRenderer, // 手动调用渲染后触发afterOnCellCornerMouseDown: this.afterOnCellCornerMouseDown, // 鼠标点击单元格边角后被调用afterOnCellCornerDblClick: this.afterOnCellCornerDblClick, // 鼠标双击击单元格边角后被调用afterOnCellMouseDown: this.afterOnCellMouseDown, // 点击单元格后触发afterOnCellMouseOver: this.afterOnCellMouseOver, // 移入单元格触发afterDocumentKeyDown: this.afterDocumentKeyDown, // 输入单元格键盘按下之后触发beforeKeyDown: this.beforeKeyDown, // 输入单元格键盘按下之前触发afterContextMenuShow: this.afterContextMenuShow, // 点击右键，显示右键菜单之后触发afterContextMenuHide: this.afterContextMenuHide, // 右键菜单隐藏后触发afterCellMetaReset: this.afterCellMetaReset, // 重置单元格后触发beforeChange: this.beforeChange, // 单元格改变前触发afterChange: this.afterChange, // 单元格改变后触发afterDeselect: this.afterDeselect, // 当前单元格被取消时触发afterSelection: this.afterSelection.bind(this, a, b, c, d), // 选中单元格后触发// a 选中的单元格起始行 b 选中的单元格的起始列 c 选中单元格的终止行 d 选中的单元格的终止列afterSelectionEnd: this.afterSelectionEnd, // 选中单元格鼠标抬起后调用afterSelectionByProp: this.afterSelectionByProp, // 通过属性名选中单元格后调用afterSelectionEndByProp: this.afterSelectionEndByProp, // 通过属性选中单元格鼠标抬起后调用beforeAutofill: this.beforeAutofill, // 开始自动填充前调动dataSchema: { id: null, name: { first: null, last: null }, address: null }, // 数据如果开始为空，那么根据这个数据结构来造数据afterChange: (change, source) => { console.log("afterChange:数据改变, change 是所改变单元格的属性，第一个是列的索引，第二个是数据的键，第三个是之前的值，最后一个是值", change, source) },columns: [ // 用某一列覆盖某一列 此时 minSpareCols 不生效{ data: 0 }, //0 用第一列复制第一列{ data: 1 }, //1 用第2列复制第2列{ data: 2 }, //2 用第3列复制第3列{ data: 3 }, //3 用第4列复制第4列{ data: 4 }, //4 用第5列复制第5列{ data: 4 }, //5 用第5列复制第6列{ data: 4 }, //5 用第5列复制第6列{ data: 4 }, //5 用第5列复制第6列],columns: function (column) {// column 为当前列的索引var columnMeta = {};if (column === 0) {columnMeta.data = 'id';} else if (column === 1) {columnMeta.data = 'name.first';} else if (column === 2) {columnMeta.data = 'name.last';} else if (column === 3) {columnMeta.data = 'address';} else {columnMeta = null;}return columnMeta;},columns: [{data: "email",validator: this.emailValidator,allowInvalid: true, // 是否启用验证},],persistentState: true, // 本地数据保存readOnly: true, // 禁用，不可编辑cell: [ // 对单元格的一些操作// { row: 0, col: 1, readOnly: true }, // 第一行，第二列的单元格禁用],cells: (row, col, prop) => {console.log("cells:")console.log(row, col, prop);// 行 , 列 , 键 return},// ! 下拉式菜单dropdownMenu: true, // 下拉式菜单dropdownMenu: ['remove_col', '---------', 'make_read_only', '---------', 'alignment'],comments: true, // 添加注释// 自定义右键菜单contextMenu: true,contextMenu: ['row_above', 'row_below', 'remove_row'],contextMenu: {callback: function (key, options) {console.log(key);console.log(options);if (key === 'about') {setTimeout(function () {// timeout is used to make sure the menu collapsed before alert is shown// alert("This is a context menu with default and custom options mixed");}, 100);}},items: {"row_above": {disabled: function () {// if first row, disable this optionreturn true;}},"row_below": {},"hsep1": "---------","remove_row": {name: 'Remove this row, ok?',disabled: function () {// if first row, disable this optionreturn true}},"hsep2": "---------","about": { name: 'About this menu' }}},beforeCopy: () => { },beforeCut: () => { },beforePaste: () => { },afterCopy: function (changes) {// this.clipboardCache = sheetclip.stringify(changes);// changes : ["A5"]// var sheetclip = new SheetClip();console.log(this);// console.log("afterCopy", sheetclip.stringify(changes));console.log(changes);this.state.clipboardCache = "";},afterCut: function (changes) {this.clipboardCache = sheetclip.stringify(changes);},afterPaste: function (changes) {// we want to be sure that our cache is up to date, even if someone pastes data from another source than our tables.this.clipboardCache = sheetclip.stringify(changes);},currentRowClassName: 'currentRow', // 突出显示行currentColClassName: 'currentCol', // 突出显示列copyPaste: true, // 允许粘贴mergeCells: true, // 合并单元格 或者提前合并  mergeCells: [{row: 1, col: 1, rowspan: 2, colspan: 2}]contextMenu: {callback: function (key, options) {},items: {"row_above": { name: "向上插入一行" },"row_below": { name: "向下插入一行" },"remove_row": { name: "删除一行" },"remove_col": { name: "删除一列", disabled: () => { } },"col_left": { name: "向左添加一列" },"col_right": { name: "向右添加一列" },"hsep1": "---------","hsep2": "---------","hsep3": "---------","undo": { name: "撤销" },"redo": { name: "恢复" },"copy": { name: "复制" },"cut": { name: "剪切" },"commentsAddEdit": { name: "添加注释" },"commentsRemove": { name: "删除注释" },"make_read_only": { name: "只读" },"alignment": { name: "对齐" },"paste": {name: '粘贴',// disabled: function () {//     return clipboardCache.length === 0;// },callback: function () {// var plugin = this.getPlugin('copyPaste');// this.listen();// plugin.paste(clipboardCache);var plugin = this.getPlugin('copyPaste');this.listen();plugin.paste(11);// console.log(this);console.log("paste回调")console.log(this)}}},},customBorders: [{range: {from: {row: 1,col: 1},to: {row: 3,col: 4}},top: {width: 2,color: '#5292F7'},left: {width: 2,color: 'orange'},bottom: {width: 2,color: 'red'},right: {width: 2,color: 'magenta'}},{row: 2,col: 2,left: {width: 2,color: 'pink'},right: {width: 1,color: 'green'}}],// sortIndicator: truecolumnSorting: true, // 排序功能columns: [{data: 'car' // 普通的字符串// 1nd column is simple text, no special options here},{type: 'numeric', // 数字 132132},{type: 'numeric',format: '格式化 0,0.00'  // 格式化操作},{data: 'year', // 年   2017年type: 'numeric'},{data: 'price_usd', // $ 美元格式化type: 'numeric',format: '$0,0.00',language: 'en-US' // this is the default locale, set up for USD},{data: 'price_eur', // 欧元 格式化type: 'numeric',format: '0,0.00 $',language: 'de-DE' // i18n: use this for EUR (German)// more locales available on http://numbrojs.com/languages.html},{type: 'checkbox', // 复选框data: 'available'},{editor: 'select', // 向下选择框selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda']},{type: 'dropdown', // 向下列表source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']},{type: 'autocomplete', // 自动完成source: ['yellow', 'red', 'orange and another color', 'green', 'blue', 'gray', 'black', 'white', 'purple', 'lime', 'olive', 'cyan'],strict: false,trimDropdown: false},{type: 'time', // 时间timeFormat: 'h:mm:ss a',correctFormat: true // 让不正确的也变成正确   为false时，填写错误会样式会变红},{data: 'password',type: 'password'},{type: 'date',dateFormat: 'MM/DD/YYYY',correctFormat: true,defaultDate: '01/01/1900',// datePicker additional options (see https://github.com/dbushell/Pikaday#configuration)datePickerConfig: {// First day of the week (0: Sunday, 1: Monday, etc)firstDay: 0,showWeekNumber: true,numberOfMonths: 3,disableDayFn: function (date) {// Disable Sunday and Saturdayreturn date.getDay() === 0 || date.getDay() === 6;}}}]}}

vue-handsontable常用配置项相关推荐

Vue.config常用配置项
只需要在项目的根目录下新建 vue.config.js 文件(是根目录,不是src目录) const path = require('path')module.exports = {publicPat ...
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server - QxQstar - 博客园
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
vue验证整数_前端Vue中常用rules校验规则
前端Vue中常用rules校验规则 1.是否合法IP地址 export function validateIP(rule, value,callback) {if(value==''||value== ...
Vue的常用指令有哪些，分别是什么作用？
Vue的常用指令有哪些,分别是什么作用? v-for指令用来遍历数组 v-model指令用来实现表单元素的双向绑定 v-if指令用来进行条件判断,可以根据表达式值的真假来插入或删除元素 v-else指 ...
Pyecharts数据可视化之折线图(阶梯图、平滑曲线图、面积图）、K线图、常用配置项
安装pyecharts pip install pyecharts -U 本次使用jupyter notebook编写代码折线图 # 引入相关包 from pyecharts.faker impor ...
vue系列：vue的常用属性和方法
vue系列:vue的常用属性vm.$ el.vm.$ data.vm.$ options.vm.$ refs和方法vm.$ mount().vm.$ nextTick().vm.$ set().vm. ...
小程序全局配置文件以及常用配置项
一.window常用配置 1.小程序根目录下的app.json文件时小程序的全局配置文件.常用配置项如下: ① pages 记录当前小程序所有页面的存放路径 ② window 全局设置小程序窗口的外观 ...
Pyecharts数据可视化之柱状图、条形图、漏斗图，常用配置项
安装pyecharts pip install pyecharts -U 柱状图基本柱状图本次使用jupyter notebook编写代码 # 引入相关包 from pyecharts.faker ...

vue-handsontable常用配置项

vue-handsontable常用配置项相关推荐

最新文章

热门文章