foolishchow/element-tree-grid

tree grid extends element ui with vue

element-tree-grid

tree grid extends element ui with vue

releases v1.0.4

• try to expand row expanded after data reload

having problems with <el-table-column type="selection" fixed></el-table-column>

if you have any idea , welcome !!!

demos

start

• clone to your project

  git clone https://github.com/foolishchow/element-tree-grid.git
  cd element-tree-grid
  npm install #or yarn
  npm run dev

• use with node

  • install

  npm install element-tree-grid --save

  • in you project

  //common 
  var ElTreeGrid = require('element-tree-grid');
  Vue.component(ElTreeGrid.name,ElTreeGrid);

useage

• common useage

  <el-table :data="model.menus" border max-height="250">
      <el-table-tree-column 
          file-icon="icon icon-file" 
          folder-icon="icon icon-folder" 
          prop="label" label="labelname" width="220"></el-table-tree-column>
      <el-table-column prop="description" label="description"   width="180"></el-table-column>
  </el-table>

• get children from remote

  • html

  <div id="app" style="padding: 30px;">
      <el-table :data="model.menus" border max-height="400">
          <el-table-tree-column 
              :remote="remote"
              file-icon="icon icon-file" 
              folder-icon="icon icon-folder" 
              prop="label" label="MenuName" width="320"></el-table-tree-column>
          <el-table-column prop="id" label="id" width="180"></el-table-column>
          <el-table-column prop="description" label="Description" :show-overflow-tooltip="true" width="180"></el-table-column>
      </el-table>
  </div>

  • javascript

  new Vue({
      el: "#app",
      data: {
          model: {
              menus: trees
          }
      },
      methods:{
          remote(row,callback){
              // async or sync are both supported
              setTimeout(function() {
                  callback(row.children)
              },500)
          }
      }
  })

• attributes

  all props of el-table-column are supported;

  name	description	values
  prop	same as el-table-column
  label	same as el-table-column
  width	same as el-table-column
  fixed	same as el-table-column
  resizable	same as el-table-column
  formatter	same as el-table-column
  className	same as el-table-column
  treeKey	the key for neasted parse	type:String, default:'id'
  childNumKey	the key of childNum	type:String, default:'child_num'
  parentKey	the key of parent_id	type:String, default:'parent_id'
  levelKey	the key of node's depth	type:String, default:'depth'
  childKey	the key of node's children been placed	type:String, default:'children'
  fileIcon	file icon className	type:String, default:'el-icon-file'
  folderIcon	folder icon className ,when opend use: folderIcon-open	type:String, default:'el-icon-folder'
  remote	remote method to get children	type:Function, default:null
  allRemote	request all data from remote ,you have to config prop remote first,default use request cache	type:Boolean, default:false
  expandAll	expand all nodes when loaded	type:Boolean, default:false
  expandKey	key tells if the line is opened at inited ( just expended once )	type:String, default:expanded
  indentSize	indent number ,united in px	type:Number, default:14

examples

• common

<el-table-tree-column 
            file-icon="icon icon-file" 
            folder-icon="icon icon-folder" 
            prop="label" 
            label="labelname" 
            width="220"></el-table-tree-column>

• with formatter

<el-table-tree-column 
            file-icon="icon icon-file" 
            folder-icon="icon icon-folder" 
            prop="label" 
            label="labelname" 
            :formatter="formatter"
            width="220"></el-table-tree-column>

• with scopedSolts

<el-table-tree-column 
            file-icon="icon icon-file" 
            folder-icon="icon icon-folder" 
            prop="label" 
            label="labelname" 
            width="220">
    <template slot-scope="scope">
        <span>prefix =></span>
        <span>{{scope.row.label}} -- {{scope.row.id}}</span> 
        <span><= suffix</span>   
    </template>
</el-table-tree-column>

element-tree-grid's Issues

why the table tree column always shown in the first column?

child_num 这个参数到底啥意思？

如题。

打包报错

我在Vue项目的main.js中如下引入：
import ElTreeGrid from 'element-tree-grid'
import ElTableTreeColumn from 'element-tree-grid/src/index.js'
Vue.component(ElTreeGrid.name, ElTreeGrid)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
ElTableTreeColumn,
template: '',
components: {
app
}
})
在npm run build的时候报错：如下：
ERROR in static/js/vendor.7887f3a6d40d515f31fd.js from UglifyJs
Unexpected token: punc (() [./~/.0.0.15@element-tree-grid/src/table-column.js:3,0][static/js/vendor.7887f3a6d40d515f31fd
.js:14339,14]

node data ara loaded repeated

When I use the remote loading child node, multiple clicks on the child node data are repeated.

template:

<el-table-tree-column :remote="remote" :expand-all="!!1" file-icon="icon icon-file" folder-icon="icon icon-folder" prop="id" label="ID"></el-table-tree-column>

javascript:

    remote(row, callback) {
            this.get('/codebook/sub/' + row.id, result => {
                var data = [];
                result.data.codes.forEach(item=>{
                    data.push(item);
                })
                callback(data);
            })
        }

请教如何删除、添加、修改 记录？

请教如何删除、添加、修改 记录？ 用官方table的方式删除会在错位

除了remote，至少提供同步返回数据值的方式

remote(row,callback){
            setTimeout(function() {
                callback(row.children)
            },500)
        }

如果我不用setTimeout，那么就出错了。比如

remote(row,callback){
           callback(row.children)
        }

这样也不行。

所以，这个有点不好。

此外，如果使用el-dialog弹出，因为异步的方式，往往table的高度计算有问题。

可以展开，收不回！！

修改间距

我如何修改第一层子元素和父元素就有一个间隔差呢？类似element-ui里面的tree组件那样的间距表现形式

My element tree grid is not work

I use this plugin but not work.
Is there some mistake with me?

 el-table(:data="dimensions")
        el-table-tree-column(label="test", :remote="load_child_dimension")
        el-table-column(label="definition" prop="definition")
        el-table-column(label="rule" prop="rule")
        el-table-column(label="tableName" prop="tableName")
//-....

//....
methods: {
    load_child_dimension(row, cb){
      let p = { params: { parentId: row.id } }
       this.$http.get("/data/indexsystem/dimension/sublist", p).then(r=>{
        row.children = r.body.datas
        cb(row.children)
      })
    },
}

table can't reload when :data changed

<el-table :data="tree" border max-height="400"
 ...

Then if change tree data. The table not reload

异步请求，无法插入DOM

Car Gps & Accessories 与 CarLights 的 children 都是异步请求的
如果不点击展开的话 两个都可以正常插入 各自的 children

但是！！！！

如果 我点击展开某一项的话 另外一项就无法插入 children
数据是有改变的！！

expandAll 或者所有的父节点expanded属性值为true时，浏览器崩溃！

我有几百条的数据量，想要初始化时展开所有的节点，在指定expandAll=true或每个父节点增加expanded=true属性后，treegrid组件出现无响应，浏览器崩溃的问题。

how to expand what i set

i don't want to expandAll but to expand what i set ,how to achieve it

[Vue warn]: You may have an infinite update loop in a component render function.

when i set :expand-all="true"
and push a children to second depth node's childrens)
then get a infinite update loop.

if :expand-all="false", not warn.

expand-all="!!1"数据多层级的时候会卡死浏览器

expand-all="!!1"数据多层级的时候会卡死浏览器

Row does not match index

When i default to open level3,the parameters of the method(doexpanded) is wrong,row does not match index,so when it open the tree,children is wrong.Maybe row[vm.childKey] can change to prefix[prefix.length-1][vm.childKey]

是否扩展方法：全部展开、全部折叠、对当前展开行进行分页

line click

how do deal with line click event?...if i click a row ..this table children will expand.

Repeated expand

Repeated expand the children

父子层级间距问题

目前父子层级都是靠左对其，如何让子层级相对父层级靠右一个单位，类似element-ui的树形展示方式。

[Vue warn]: Error in render: "TypeError: Cannot read property 'map' of undefined"

i did do exactly like you done in the example but i still get this error no matter what ! i use same ui , element io ... i just store the data in data store instead of make it as variable

any tips?

关于正确获取row.expanded

楼主大大您好.
之前使用您这个插件(el-tree-grie:v0.0.15, el-ui:v1.4.6),触发talbe的rowClick事件时，可以返回正确的row.$extra.expanded。
后来升级了el-ui:v2.3.3,再次获取row.$extra.expanded就不正确了。
再次升级el-tree-grie:v0.1.3，获取row中已经没有$extra了。
请问我该如何获取当前row的正确的expanded状态？

how to config events of tree-grid?

such as expand

如何添加行点击事件?

我该在什么位置添加行点击事件

我渲染完数据后点击三角号下面的数据会自动删除

渲染完页面后 点三角号后有3条数据会自动删除怎么回事啊？

element-tree-grid字体图标不显示

不知道为什么，照着文档敲出来的，最后icon图标并没有显示出来

how to refresh remote children without re-expand table?

children are got from remote, when children are changed, how to refresh them without re-expand table?

当数据量很多,嵌套很深,以很快的速度点击展开,折叠,树的顺序会发生错乱,怎么解决?

v0.0.12 still have repeated bug, and wrong hierarchy

On 0.0.12 version, i found still have repeated bug, and wrong hierarchy.
And if i use element el-tree , everything is ok. So i guess the data is valid.

My tree data json is here:
[ { "id": 1, "label": "root", "value": { "data": [ { "name": "gm", "age": 19, "hobby": { "aa": 11, "bb": 22 } } ], "state": 0 }, "remark": "", "type": "object", "oriType": "object", "children": [ { "id": 2, "label": "data", "value": [ { "name": "gm", "age": 19, "hobby": { "aa": 11, "bb": 22 } } ], "remark": "", "type": "array<object>", "oriType": "array<object>", "subType": "object", "children": [ { "id": 4, "label": "name", "value": "gm", "remark": "", "type": "string", "oriType": "string", "children": [] }, { "id": 5, "label": "age", "value": 19, "remark": "", "type": "number", "oriType": "number", "children": [] }, { "id": 6, "label": "hobby", "value": { "aa": 11, "bb": 22 }, "remark": "", "type": "object", "oriType": "object", "children": [ { "id": 7, "label": "aa", "value": 11, "remark": "", "type": "number", "oriType": "number", "children": [] }, { "id": 8, "label": "bb", "value": 22, "remark": "", "type": "number", "oriType": "number", "children": [] } ] } ] }, { "id": 9, "label": "state", "value": 0, "remark": "", "type": "number", "oriType": "number", "children": [] } ] } ]

更新table的data属性，会导致树的展开状态乱掉

更新table的data属性，会导致树的展开状态乱掉，比如我先展开一级目录，然后更新data属性，结果展开的行消失了，然后刚刚展开的行的图标仍然是展开状态

how make tree grid expanded by default

as the title

How to get all expand rows?

Google translated :

When I reload table data , i want to keep the row expanded.

thanks.

我也遇到了打包报错问题

vue组件
`import ElTableTreeColumn from 'element-tree-grid/src/index.js'

export default {
name: '',
components: {
ElTableTreeColumn
},
data () {
return {
tableData: [],
searchForm: {}
}
},
computed: {},
created () {
this.loadMenu()
},
methods: {
loadMenu () {
this.axios.get('/brandhall/setting.menu/getlist').then(res => {
this.tableData = res
})
},
addMenu () {
this.$router.push('add')
},
editMenu (id) {
this.$router.push('edit/' + id)
},
deleteMenu (id) {
this.$confirm('您确定要删除该菜单吗？', '提示', {
type: 'warning'
}).then(() => {
this.axios.post('/brandhall/setting.menu/delete', {id: id}).then(res => {
this.loadMenu()
})
}, () => {})
}
}
}`
路由使用的懒加载

babel配置
{ "presets": [ ["env", { "modules": false }], "stage-2" ], "plugins": ["transform-runtime",["component", [ { "libraryName": "element-ui", "styleLibraryName": "theme-default" }, { "libraryName": "element-tree-grid" }, { "libraryName": "vue-qrcode" } ]]], "comments": false, "env": { "test": { "presets": ["env", "stage-2"], "plugins": [ "istanbul" ] } } }

打包总是报错，
Unexpected token: punc (() [./~/_element-tree-grid@0.0.15@element-tree-grid/src/table-column.js:3,0][static/js/8.3f0de3281e3c143d7485.js:230,14]
请问下怎么解决啊

prop 'default-expanded-keys' may be needed

prop 'expand-all' is not exactly i needed, but also thanks for your hard work.

Remote never called

All data are objects(not your format, simular to ORM on sqlalchemy), so i cannot set "prop".
And "remote" method never called, set "allRemote" does not help me

expandAll

设置expandAll为true,第一次加载数据时表格是展开的，但第二次加载数据表格没有展开