后台管理系统表格插件

前言

现在的前端开发不像前几年啦，页面仔标签也少听了，基于UI组件开发后台管理系统的的工作是越来越多，后台管理系统无非就是什么图表，Table，下拉框之类的，我来记录一下我用过的两个我认为比较好用的Table插件。

Jexcel

看名字就能知道，它是一个JS版本的Excel(v5)，当然它相比Excel还是弱了很多的。

• 可以从数组，CSV，静态Table标签中得到数据源
• Ctrl操作，鼠标下拉操作
• type 可选值

Vue 小记

// template
<div id="spreadsheet" ref="spreadsheet"></div>

// script
import jexcel from 'jexcel-pro'
import style from 'jexcel-pro/dist/jexcel.css'
const jExcelObj = jexcel(this.$refs["spreadsheet"], {
    data: [
        [1,2,3,4,5],
        [1,2,3,4,5],
    ],
    columns: [
        { type: 'text', title:'Car', width:'120px' },
        { type: 'dropdown', title:'Make', width:'200px', source:[ "Alfa Romeo", "Audi", "Bmw" ] },
        { type: 'calendar', title:'Available', width:'200px', options:{ format:'DD/MM/YYYY' } },
        { type: 'image', title:'Photo', width:'120px' },
        { type: 'checkbox', title:'Stock', width:'80px' },
        { type: 'numeric', title:'Price', width:'100px', mask:'$ #.##,00', decimal:',' },
        { type: 'color', width:'100px', render:'square', }
    ]
});
Object.assign(this, { jExcelObj }); // 将此对象混入到当前组件中，后面可以使用this获取此对象

GridManager

因为当时选择的Vue，所以使用的是ElementUI，没有一些特殊的需求(行移动，列移动...)，这个GridManage是我现在用到功能最强的。

• 常用功能可右键-看最近好像可以自定义右键菜单了
• 自带 导出功能，隐藏列，分页功能
• 三大框架版本都有 Angular是1的版本

Vue 小记

// script
managerName: `Table${ Date.now() }` // 表格名称
// template
:grid-manager-name-prop='managerName' // 这样写是肯定正确的
:grid-manager-name-prop='`Table${ Date.now() }`' // 这样写会有一些奇怪的bug

第一次写，不要喷我呀...