最近有個需求需要實現自定義首頁佈局，需要將屏幕按照 6 列 4 行進行等分成多個格子，然後將組件可拖拽對應格子進行渲染展示。 示例 對比一些已有的插件，發現想要實現產品的交互效果，沒有現成可用的。本身功能並不是太過複雜，於是決定自己基於 vue 手擼一個簡易的 Grid 拖拽佈局。 完整源碼在此，在 ...
此文檔記錄的是wolf-table的style格式文檔, 如果你找的是x-data-spreadsheet, 那麼請查閱這個文檔https://www.cnblogs.com/WilsonZhu/p/17858411.htmlwolf-table 的格式輸入只有一個方式, 通過調用addStyle以及cell函數來進行格式的改變
例子如下:
import Table from '@wolf-table/table';let a = Table.create('#id',()=>400,()=>400); //初始化表格,並且設置綁定的元素,寬度和高度 第一個值填入的內容要能夠被 document.querySelector()解析
let styleIndex = a.addStyle({bold:true,strikethrough:true}); //這裡是調用增加格式的函數, 會返回增加的這個格式的調用索引
a.cell(1,1,{value:'abc',style:styleIndex}); // 這裡的cell函數一共有3個輸入, 第一個是行的索引,第二個是列的索引,第三個是單元格所對應的對象, 對象中的value元素代表單元格的值, style元素放的是格式的調用索引
a.render(); //這個render函數非常關鍵, 如果不調用這個函數,那麼你上面做的所有的事都不會生效
以下是style對象中生效的配置fontSize, //字型大小
fontFamily, //字體
bold, //加粗 放Boolean
italic, //斜體 放Boolean
color, //字體顏色 16進位顏色
bgcolor, //單元格顏色 16進位顏色
align, //水平對齊 參考canvas中的align變數
valign, //垂直對齊 參考canvas中的valign變數
underline, //下劃線 放Boolean
strikethrough, //劃線 放Boolean
rotate, //旋轉 放數字
textwrap, //我不知道這個是拿來幹啥的
padding //和html中的padding一個意思 放的是數字
