vue-editexcel_table
v0.1.4
Published
在线编辑表格
Downloads
7
Readme
vue-editexcel_table
基于Vue的颜色选择器插件
安装
$ npm install vue-editexcel_table -S使用
在 main.js 文件中引入插件并注册
# main.js
import vue-editexcel_table from 'vue-editexcel_table'
Vue.use(vue-editexcel_table)在项目中使用 vue-editexcel_table
<template>
<editTable :abilityTree="tableData" />
</template>
<script>
export default {
data () {
return {
tableData: [
{
"Id": "bb02762b-7f04-4928-8918-0c058d862c85",
"ParentId": null,
"Sort": 2,
"Code": "02",
"Name": "第一行",
"Type": "Project",
"Checked": false,
"SelectCount": null,
"CheckStatus": 0,
"IsChanged": false,
"Children": [
{
"Id": "addd0007-40d8-4136-9b9d-e0edd802cef2",
"ParentId": "bb02762b-7f04-4928-8918-0c058d862c85",
"Sort": 1,
"Code": "02-01",
"Name": "略略略",
"Type": "Task",
"Checked": false,
"SelectCount": null,
"CheckStatus": 0,
"IsChanged": false,
"Children": [
{
"Id": "dd88524b-99a0-4e12-8525-866f3897c5e0",
"ParentId": "addd0007-40d8-4136-9b9d-e0edd802cef2",
"Sort": 1,
"Code": "02-01-01",
"Name": "嘻嘻",
"Type": "Ability",
"Checked": false,
"SelectCount": null,
"CheckStatus": 0,
"IsChanged": false,
"Children": [],
"Demand": null,
"Li": null,
"Lj": null,
"Lk": null
},
{
"Id": "c9222365-94fd-4a28-8df5-caa3659a9d2d",
"ParentId": "addd0007-40d8-4136-9b9d-e0edd802cef2",
"Sort": 2,
"Code": "02-01-02",
"Name": "嘻嘻",
"Type": "Ability",
"Checked": false,
"SelectCount": null,
"CheckStatus": 0,
"IsChanged": false,
"Children": [],
"Demand": null,
"Li": null,
"Lj": null,
"Lk": null
},
{
"Id": "821e3345-642c-4018-9a79-293958fc2139",
"ParentId": "addd0007-40d8-4136-9b9d-e0edd802cef2",
"Sort": 3,
"Code": "02-01-03",
"Name": "第三行",
"Type": "Ability",
"Checked": false,
"SelectCount": null,
"CheckStatus": 0,
"IsChanged": false,
"Children": [],
"Demand": null,
"Li": null,
"Lj": null,
"Lk": null
},
{
"Id": "410d1859-4e70-46c8-86ed-807d7e252cac",
"ParentId": "addd0007-40d8-4136-9b9d-e0edd802cef2",
"Sort": 4,
"Code": "02-01-04",
"Name": "第三行",
"Type": "Ability",
"Checked": false,
"SelectCount": null,
"CheckStatus": 0,
"IsChanged": false,
"Children": [],
"Demand": null,
"Li": null,
"Lj": null,
"Lk": null
}
],
"Demand": null,
"Li": null,
"Lj": null,
"Lk": null
},
{
"Id": "78fd0978-2ed8-49e6-bcc6-1bd609c347f5",
"ParentId": "bb02762b-7f04-4928-8918-0c058d862c85",
"Sort": 2,
"Code": "02-02",
"Name": "啦啦啦",
"Type": "Task",
"Checked": false,
"SelectCount": null,
"CheckStatus": 0,
"IsChanged": false,
"Children": [],
"Demand": null,
"Li": null,
"Lj": null,
"Lk": null
},
{
"Id": "bf74247f-84d5-4373-a0e8-11e3cdbcce8e",
"ParentId": "bb02762b-7f04-4928-8918-0c058d862c85",
"Sort": 3,
"Code": "02-03",
"Name": "第二行",
"Type": "Task",
"Checked": false,
"SelectCount": null,
"CheckStatus": 0,
"IsChanged": false,
"Children": [
{
"Id": "7c83805e-4892-4181-bcff-a4a69ae44279",
"ParentId": "bf74247f-84d5-4373-a0e8-11e3cdbcce8e",
"Sort": 1,
"Code": "02-03-01",
"Name": "么么哒",
"Type": "Ability",
"Checked": false,
"SelectCount": null,
"CheckStatus": 0,
"IsChanged": false,
"Children": [],
"Demand": null,
"Li": null,
"Lj": null,
"Lk": null
}
],
"Demand": null,
"Li": null,
"Lj": null,
"Lk": null
},
{
"Id": "ea22c538-71c6-458e-a3bf-0120f71bb94b",
"ParentId": "bb02762b-7f04-4928-8918-0c058d862c85",
"Sort": 4,
"Code": "02-04",
"Name": "22",
"Type": "Task",
"Checked": false,
"SelectCount": null,
"CheckStatus": 0,
"IsChanged": false,
"Children": [
{
"Id": "dbfa9848-adf7-445c-96b7-094b45e14e6e",
"ParentId": "ea22c538-71c6-458e-a3bf-0120f71bb94b",
"Sort": 1,
"Code": "02-04-01",
"Name": "888",
"Type": "Ability",
"Checked": false,
"SelectCount": null,
"CheckStatus": 0,
"IsChanged": false,
"Children": [],
"Demand": null,
"Li": null,
"Lj": null,
"Lk": null
},
{
"Id": "12feff0a-f3f1-4773-a80b-d46988c76feb",
"ParentId": "ea22c538-71c6-458e-a3bf-0120f71bb94b",
"Sort": 2,
"Code": "02-04-02",
"Name": "嘻嘻",
"Type": "Ability",
"Checked": false,
"SelectCount": null,
"CheckStatus": 0,
"IsChanged": false,
"Children": [],
"Demand": null,
"Li": null,
"Lj": null,
"Lk": null
},
{
"Id": "a021fce0-604b-4395-80b7-12c8cb906478",
"ParentId": "ea22c538-71c6-458e-a3bf-0120f71bb94b",
"Sort": 3,
"Code": "02-04-03",
"Name": "3333",
"Type": "Ability",
"Checked": false,
"SelectCount": null,
"CheckStatus": 0,
"IsChanged": false,
"Children": [],
"Demand": null,
"Li": null,
"Lj": null,
"Lk": null
},
{
"Id": "19a1827a-18b3-4ac3-8c53-8539f7bd3367",
"ParentId": "ea22c538-71c6-458e-a3bf-0120f71bb94b",
"Sort": 4,
"Code": "02-04-04",
"Name": "666",
"Type": "Ability",
"Checked": false,
"SelectCount": null,
"CheckStatus": 0,
"IsChanged": false,
"Children": [],
"Demand": null,
"Li": null,
"Lj": null,
"Lk": null
},
{
"Id": "ac898ee3-9c80-4b60-a9ec-80cf545110c6",
"ParentId": "ea22c538-71c6-458e-a3bf-0120f71bb94b",
"Sort": 5,
"Code": "02-04-05",
"Name": "222",
"Type": "Ability",
"Checked": false,
"SelectCount": null,
"CheckStatus": 0,
"IsChanged": false,
"Children": [],
"Demand": null,
"Li": null,
"Lj": null,
"Lk": null
}
],
"Demand": null,
"Li": null,
"Lj": null,
"Lk": null
}
],
"Demand": null,
"Li": null,
"Lj": null,
"Lk": null
}
]
}
}
}
</script>特点
- excel表格基本功能（增删改）、新增拖拽移动和上移下移
- 提供以
npm的形式安装提供全局注册组件以及按需引入 - 支持局部注册组件
选项
- 你可以通过在props设置以下属性来配置组件具体启用哪些功能
- abilityTree：能力数据（必传参数）
- tier：勾选层级，0:无法勾选，1-3:第1-3级。默认为0
- defaultKeys：初始化时自动勾选的id数组，勾选层级不为0时生效
- isEdit：是否可编辑
- baseParams：编辑状态下所有请求都会附带的基础参数
- addRequest、deleteRequest、editRequest、moveRequest、dragRequest：增、删、改、上下移、拖拽请求的url和参数
- taskAbility：典型工作任务各课程对应能力的对象，例子：{id：1}
- showRequire：是否开启能力要求勾选
- showLevel：是否开启学习水平勾选
- catlogId，abilityId：项目或者任务、能力id
- showTotal：是否开启数据统计
- onlyShowChecked：是否仅显示已勾选项目
- onlyShowChecked：各项目的勾选次数对象，例子：{id：1}
- limitNum：限制最多勾选几次时发出警告
- canDelete：是否开启删除功能
通过.sync实现双向绑定属性
- :projectNum.sync
- :taskNum.sync
- :abilityNum.sync