table-custom

自定义表格组件（For the user-defined table component），可用于设计、打印各种表格数据

Usage no npm install needed!

<script type="module">
  import tableCustom from 'https://cdn.skypack.dev/table-custom';
</script>

README

自定义表格组件，使用方法可以参见组件内app.vue演示页面

For the user-defined table component, please refer to the app.vue demo page in the component

（demo地址）

The list of realizable functions is as follows:

    1. User defined table structure (including row and column information and single table size)
    1. Custom move setting block (including text content, zoom or not)
    1. Drag and move to set the table content (drag the moving block into the table to complete the table content setting)
    1. Each cell in the table can move and replace each other
    1. The assigned cells in the table can be copied up, down, left, right, assigned values, and deleted
    1. Table contents can be saved (including exported to text) and restored next time
    1. The contents of the form can be printed and what you see is what you get
    1. The use area of the table supports infinity (horizontal and vertical scrolling). When dragging and moving, you can click and scroll the mouse wheel (move horizontally and press shift to scroll) to complete the movement
    1. Move the block into the table. After setting, you can return it by clicking another
    1. The mobile block color is generated randomly after each initialization
    1. The data stored by the table control includes: row information ftimer, column information fcourse, moving block information ftool, cell width fwidth, cell height fheight, and overall table data fdata
    1. A processing function is also provided when the scroll bar of a Vue frame cannot be used
    1. Column information can be dynamically added to the header, and event operations can be performed at the same time
    1. All cells in the table can perform event operations
  • 15、Click the blank space to set the shortcut
  • 16、Support title column drag and replace
  • 17、Supports drag and drop replacement of the left column
  • 18、Cell hovering display properties are supported
  • 19、It supports adding new attributes to cells in a certain format

For other matters not covered, please contact me at QQ: 44822961 or email to feiranjipin@outlook.com

可实现功能列表如下：

  • 1、自定义表结构（包括行、列信息，单表格大小）
  • 2、自定义移动设置块（包括文本内容、是否缩放）
  • 3、拖拽移动设置表格内容（将移动块拖拽至表格内可以完成表格内容设置）
  • 4、表格内的每单元格可以相互移动替换位置
  • 5、表格内的已经赋值单元格，可以自由上下左右复制，可以为其赋值，并且可以删除
  • 6、表格内容可以保存（包括导出成文本），下次可以还原
  • 7、表格内容可以打印，所见即所得
  • 8、表格使用区域支持无限大（水平滚动垂直滚动都可以），拖拽移动时可以点选后滚动鼠标滚轮（水平移动按住shift滚动）完成移动
  • 9、移动块进入表格完成设置后可以通过单击另其归位
  • 10、移动块颜色每次初始化后随机生成
  • 11、表格控件存储数据包括：行信息fTimer、列信息fCourse、移动块信息fTool、单元格宽度fWidth、单元格高度fHeight、整体表格数据fData
  • 12、针对某项vue框架滚动条无法使用的情况也提供了处理函数
  • 13、表头可以动态添加列信息，同时可以进行事件操作
  • 14、表内的单元格都可以进行事件操作
  • 15、空白格单击可以快捷设置
  • 16、支持标题列拖拽替换
  • 17、支持左侧列拖拽替换
  • 18、支持单元格悬停展示属性
  • 19、支持按一定格式给单元格添加新属性

其他未尽事宜，可以联系我QQ：44822961或邮件至feiranjipin@outlook.com

代码实现：

html:

<DesignVenue

  • :row-data="fTimer" //行标题
  • move-into //是否启用表格内区块移动功能
  • :el-mouse="felMouse" //是否启用缩放(废弃，已改为是否启用工具栏，默认false)
  • :cell-data="fCourse" //列标题
  • :dis-w="disWindow" //是否启用提示
  • :dis-op="disOperation" //是否禁用编辑工具栏
  • :tool-data="fTool" //自定义工具栏
  • ref="dv" //表格名称
  • :every-width="eWidth" //每单元格宽度
  • :every-height="eHeight" //每单元格高度
  • @onDdvMouseUp="setPj" //单元格单击事件
  • @onDdvRowDown="setRowTitle" //行标题单击
  • @onDdvCellDown="setCellTitle" //列标题单击
  • :html-template="htmlTemp"> //单元格自定义模板(水印)

method：

序号 方法名 参数 说明
1 createTable 无 创建表格
2 initData 初始化数据
rowData 表格行标题数据例如：行1,行2,行3
cellData 表格列标题数据例如：列1,列2,列3
headData 表格内可设置数据例如：语文,数学,英语
felMouse 是否启用缩放（老版本针对工具栏，已废弃），默认：false
eWidth 每个单元格宽度例如：128
eHeight 每个单元格高度例如：60
felDel 单元格水印，支持html文本格式默认：`` 代表使用系统默认水印，如果不想使用可赋值：' '（ES6`符号中间加个空格）
dWin 是否启用提示（设置为true，会悬停展示单元格属性），默认：True
dOper 是否启用单元格编辑项，默认：false设置为 false:可应用于网页端，不需要通过编辑按钮即可实现对单元格编辑功能（直接单击）设置为 true：可应用于非网页端（手机、iPad等），单击单元格会显示编辑按钮说明：网页端编辑会附加对单元格的属性编辑功能（非网页端只修改名称）
3 submitData 获取表格数据，获取数据格式示例如下：{ fCourse,fTimer,fWidth,fHeight,felMouse,felMouse,fTool,fData }
fCourse: 列数据 fCourse: (6) ["", "星期一", "星期二", "星期三", "星期四", "星期五"]
fTimer: 行数据 fTimer: (7) ["", "(上午)第一节", "(上午)第二节", "(上午)第三节", "(上午)第四节", "(下午)第一节", "(下午)第二节"]
fWidth: 单元格宽度 fWidth: "128"
fHeight: 单元格高度 fHeight: "60"
felMouse: 废弃 felMouse: false
fTool: 可设置数据 fTool: (3) [ 0：{ bgColor: "#3ac422"， color: "white"， index: 0， left: 0， name: "语文"， nameJ: "语"， width: "44" }， 1：{...}, 2：{...} ]
fData: 已设置单元格数据 fData: (6) [ 0：{ bgColor: [0：“white”，1：“white”，2：“white”，3：“white”，4：“white”]， color: [0：“black”，1：“black”，2：“black”，3：“black”，4：“black”]， cellData: [0：“”，1：“”，2：“”，3：“”，4：“”]， id: [0：“dDv11”，1：“dDv12”，2：“dDv13”，3：“dDv14”，4：“dDv15”]， titleData: [0：“(上午)第一节 星期一”，1：“(上午)第一节 星期二”，2：“(上午)第一节 星期三”，3：“(上午)第一节 星期四”，4：“(上午)第一节 星期五”]， state: [0：“0”，1：“0”，2：“0”，3：“0”，4：“0”]， object: [0：{}，1：{}，2：{}，3：{}，4：{}] }， 1：{...}， 2：{...}， 3：{...}， 4：{...}， 5：{...}， 6：{...} ]
4 resumeData 还原数据
fObj 由submitData获取的数据
5 printTable 无 打印表格数据
6 clearData 无 清空表格数据（保留已设置行列信息）
7 setWbScroll 在部分框架滚动失效时，可以手动设置滚动坐标值
x 框架超出的x坐标
y 框架超出的y坐标
8 doSave 将获取的表格数据用指定方式进行存储
value 要存储的数据例如：JSON.stringify(this.$refs.dv.submitData()) 注意转换成字符串
type 要存储的文件类型例如：text/latex
name 要存储的文件名例如：dDvData.txt
9 writeText 写入单元格文本数据
objData 要写入的对象，控件本身
dDvText 要写入的值（字符串类型）
10 writeObject 写入单元格对象数据
objData 要写入的对象，控件本身
dDvText 要写入的对象，用于附加个人自定义属性例如：{"id":"dDv11","moveDdvText":"数学","title":"(上午)第一节 星期一"}
11 writeTitleText 设置行、列标题文本
data 对应的行或者列对象
dDvTitleText 要写入的值（字符串类型）
nums 设置行标题0设置列标题 1

events：

  • @onDdvMouseUp 单元格点击事件
  • @onDdvRowDown 标题单击事件
  • @onDdvCellDown 行单击事件