1.0.2 • Published 5 years ago
vue-element-treegrid v1.0.2
vue-element-treegrid
项目介绍
作者作为一名前端开发,深知前端领域拿来即用的便捷和高效,npm为我们提供了一个代码共享的好平台,往后我会积极与道友们热烈讨论,发扬无私共享的码农精神,为前端领域的喷薄发展添砖加瓦。 分享和讨论才能日益完善项目,欢迎各界大神给我的项目提出质疑和优化建议,我会积极参与到与您的讨论中,改善项目,提高自己,奉献大伙,谢谢 组件基于vue-2.3.0+ 和 element-ui 2.0大版本的table组件开发的treegrid组件,兼容vue 2.3.0+ 和 element-ui 2.0大版本 ==注意:组件必须与vue + element-ui一起服用才是最佳,样式和图标都是基于element-ui的==
插件说明
1、插件对外暴露tree,labelText,list,superid,defaultProps等属性
- 1)tree是必选项,是需要展示的整体树形数据,树型结构数据格式如
[{
"id": "1",
"pid": "0",
"label": "北京",
"value": "1",
"children": [{
"id": "110000",
"pid": "1",
"label": "市辖区",
"value": "110000",
"children": [{
"id": "110001",
"pid": "110000",
"label": "东城区",
"value": "110001",
}]
}]
}]
2)labelText为可选项:是表头的显示名称,默认为“名称”
3)list为可选项,是反馈给父组件的列表数据(增删查改操作在父组件进行),格式跟tree的单项数据无异,而且会多一个属性fullpid,如上北京东城区的fullpid为
fullpid = "0,1,110000,"
4)superid为可选项,定义为顶级结点id,默认为"0"
5)defaultProps为可选项,是属性转义,只提供如下属性转义,可根据各自数据属性来调整,默认如下:
{
id: "id",
label: "label",
pid: "pid"
}
2、提供column插槽
插槽用于表格其它列内容占位,如:
<el-table-column show-overflow-tooltip width="180" slot="column" label="类型">
<template slot-scope="scope">
<span>{{scope.row.type}}</span>
</template>
</el-table-column>
<el-table-column slot="column" width="420" label="操作" fixed="right">
<template slot-scope="scope">
<el-button type="primary" size="mini" title="修改" @click="editMenu(scope.row.id)" icon="el-icon-edit">修改</el-button>
<el-button type="danger" size="mini" title="删除" @click="deleteMenu(scope.row.id)" icon="el-icon-delete">删除</el-button>
</template>
</el-table-column>
使用说明
template如下:
<MyTreeGrid :tree="area" :superid="superid" :list.sync="recordList" :defaultProps="defaultProps">
<el-table-column slot="column" label="区域代号">
<template slot-scope="scope">
<span>{{scope.row.value}}</span>
</template>
</el-table-column>
<el-table-column slot="column" width="350" label="操作">
<template slot-scope="scope">
<el-button type="primary" size="mini" title="修改" @click="editArea(scope.row.id)" icon="el-icon-edit">修改</el-button>
<el-button type="primary" v-if="scope.row.type < 3" size="mini" title="添加下级区域" @click="addSubArea(scope.row.id)" icon="el-icon-edit">添加下级区域</el-button>
<el-button type="danger" size="mini" title="删除" @click="deleteArea(scope.row.id)" icon="el-icon-delete">删除</el-button>
</template>
</el-table-column>
</MyTreeGrid>
script如下:
data() {
return {
superid: "0",
defaultProps: { // treegrid组件的对应属性命名
id: "id",
label: "label",
pid: "pid"
},
recordList: [],
area: []
}
}
##备注 1、后续优化:默认展开所有层级 2、欢迎各位道友指摘,一起提高自己,奉献社会!