# Vue-element-TreeGrid

**Repository Path**: mr_virgo/Vue-element-TreeGrid

## Basic Information

- **Project Name**: Vue-element-TreeGrid
- **Description**: 作者作为一名前端开发，深知前端领域拿来即用的便捷和高效，npm为我们提供了一个代码共享的好平台，往后我会积极与道友们热烈讨论，发扬无私共享的码农精神，为前端领域的喷薄发展添砖加瓦。
分享和讨论才能日益完善项目，欢迎各界大神给我的项目提出质疑和优化建议，我会积极参与到与您的讨论中，改善项目，提高自己，奉献大伙，谢谢
组件基于vue-2.3.0+ 和 element-ui 2.0大版本的table组件开发的treegrid组件，兼容vue 2.3.0+ 和 element-ui 2.0大版本
==注意：组件必须与vue + element-ui一起服用才是最佳，样式和图标都是基于element-ui的== 
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2019-08-21
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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是必选项，是需要展示的整体树形数据，树型结构数据格式如
``` javascript
[{
    "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为
```javascript
fullpid = "0,1,110000,"
```
- 4）superid为可选项，定义为顶级结点id，默认为"0"

- 5）defaultProps为可选项，是属性转义，只提供如下属性转义，可根据各自数据属性来调整，默认如下：
```javascript
{
    id: "id",
    label: "label",
    pid: "pid"
}
```
### 2、提供column插槽
    插槽用于表格其它列内容占位，如：
```javascript
<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>
```
    
## 使用说明
```javascript 
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、欢迎各位道友指摘，一起提高自己，奉献社会！