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、欢迎各位道友指摘，一起提高自己，奉献社会！