huanglong6828 / vue-tree-grid Goto Github PK
View Code? Open in Web Editor NEW基于vue和优秀的iView组件库的树型表格(tree-table/tree-grid)
基于vue和优秀的iView组件库的树型表格(tree-table/tree-grid)
.ivu-icon-plus-circled:before {
content: "\F216";
}
*, :after, :before {
box-sizing: border-box;
}
你好,楼主。使用了下,感觉还可以,就是不支持render。不知道能像原生table那样,可以在每个 column里面自定义 想返回的内容格式例如:
{ key: 'status', title: '状态', width: 20, align: 'left', render: (h, params) => { if (params.row.status !== '') { return h('div', { attrs: { style: 'width: 100%;float: left;' } }, [ h('img', { attrs: { class: params.row.status === 1 ? 'online' : 'offline', src: '' } }) ]); } } }
选中全选,就一直处于选中的状态
我数据绑定的是data1
我的代码如下:
rowClick(data, index, event) {
console.log(data)
let children=data.children?data.children:[]
children.push({
id:'001',
code:'222aia',
name:'测试测试'
})
this.$set(data,'children',children)
console.log('当前行数据:' , data)
console.log('点击行号:' , index)
console.log('点击事件:' , event)
// data1是绑定的数据
console.log('this.data1',this.data1)
},
console.log('当前行数据:' , data)
这行children是有数据
但是我绑定的data1这条数据的children并没有add 进去
请问最新版默认全部展开问题怎么处理?行点击高亮。。
删除按钮 删除一个节点后,所有展开的节点都折叠了。能不能保持当前展开都节点状态?
Uncaught SyntaxError: Unexpected token import
能不能格式化数据啊,比如我返回的数据的某个属性是一个对象,我怎么取出数据,并且为空时显示特定的提示,或者换句话说,我返回状态是数值,如何格式化为正常或者禁用,这个不会需要在后台格式化吧,后端提供的接口是一定了的
我用vue-cli把TreeGrid2.0的单文件组件生成了一个可以直接引用的js使用,结果放在html中vue不能识别此组件,报Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
,请问可否将此组件基于vue2.0生成一个可直接引用的js文件发布上了?
很着急。。
改的地方不多,
1、watch方法 监控items
添加了 一行 this.initItems = [] ,防止父组件里数据更新了,initItems数组不更新而是在后面添加
items () {
if (this.items) {
this.initItems = []
this.dataLength = this.Length(this.items)
this.initData(this.deepCopy(this.items), 1, null)
this.checkGroup = this.renderCheck(this.items)
if (this.checkGroup.length == this.dataLength) {
this.checks = true
} else {
this.checks = false
}
}
},
// this.initItems = []
注释掉
expanded 跟isShow 如果不在数据中指定,此处设置为了true
items forEach每次循环使用splice方法更新数组数据
// 数据处理 增加自定义属性监听
initData (items, level, parent) {
// 1、之前全关闭此处没有注释掉, 'expanded': false 'isShow': false
// this.initItems = []
let spaceHtml = ''
for (var i = 1; i < level; i++) {
spaceHtml += "<i class='ms-tree-space'></i>"
}
items.forEach((item, index) => {
item = Object.assign({}, item, {
'parent': parent,
'level': level,
'spaceHtml': spaceHtml
})
// 2、
if ((typeof item.expanded) === 'undefined') {
item = Object.assign({}, item, {
'expanded': true
})
}
if ((typeof item.show) === 'undefined') {
item = Object.assign({}, item, {
'isShow': true
})
}
if ((typeof item.isChecked) === 'undefined') {
item = Object.assign({}, item, {
'isChecked': false
})
}
item = Object.assign({}, item, {
'load': (!!item.expanded)
})
this.initItems.push(item)
if (item.children && item.expanded) {
this.initData(item.children, level + 1, item)
}
// 3、使用splice方法更新数组数据
items.splice(index, 1, item)
})
},
initItem更本没发事实改变监听,添加和删除节点实现倒是实现了,但巨麻烦绕了一圈才能实现!另外我想对表格实现上移下移功能,貌似这个数据格式根本无法实现啊!
大大 怎么默认全部展开啊
run dev 报错
vue-tree-grid/src/components/treeGrid2.0.vue
Line 178 in efcccf1
有支持elementUI的机会吗?
行点击事件无效,注册后点击 无效;我是直接把treegrid2.0里的代码 拷贝来用的,有iview依赖
当展开子节点的时候,子节点并不是true,但是还是会选中,我想了解一下,你的默认选中其实是根据id的值来判断的是吗?还有就是是否选中也是根据id值来判断的?
cnpm install 结束后
npm run dev 白屏,什么都没有
能不能加你一个扣扣 有个问题需要向你请教
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.