## 写在前面
此组件仅提供一个创建TreeTable的解决思路
## prop说明
#### *data*
**必填**
原始数据,要求是一个数组或者对象
```javascript
[{
key1: value1,
key2: value2,
children: [{
key1: value1
},
{
key1: value1
}]
},
{
key1: value1
}]
```
或者
```javascript
{
key1: value1,
key2: value2,
children: [{
key1: value1
},
{
key1: value1
}]
}
```
#### columns
列属性,要求是一个数组
1. text: 显示在表头的文字
2. value: 对应data的key。treeTable将显示相应的value
3. width: 每列的宽度,为一个数字(可选)
如果你想要每个字段都有自定义的样式或者嵌套其他组件,columns可不提供,直接像在el-table一样写即可,如果没有自定义内容,提供columns将更加的便捷方便
如果你有几个字段是需要自定义的,几个不需要,那么可以将不需要自定义的字段放入columns,将需要自定义的内容放入到slot中,详情见后文
```javascript
[{
value:string,
text:string,
width:number
},{
value:string,
text:string,
width:number
}]
```
#### expandAll
是否默认全部展开,boolean值,默认为false
#### evalFunc
解析函数,function,非必须
如果不提供,将使用默认的[evalFunc](./eval.js)
如果提供了evalFunc,那么会用提供的evalFunc去解析data,并返回treeTable渲染所需要的值。如何编写一个evalFunc,请参考[*eval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/TreeTable/eval.js)或[*customEval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customEval.js)
#### evalArgs
解析函数的参数,是一个数组
**请注意,自定义的解析函数参数第一个为this.data,第二个参数为, this.expandAll,你不需要在evalArgs填写。一定记住,这两个参数是强制性的,并且位置不可颠倒** *this.data为需要解析的数据,this.expandAll为是否默认展开*
如你的解析函数需要的参数为`(this.data, this.expandAll,1,2,3,4)`,那么你只需要将`[1,2,3,4]`赋值给`evalArgs`就可以了
如果你的解析函数参数只有`(this.data, this.expandAll)`,那么就可以不用填写evalArgs了
具体可参考[*customEval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customEval.js)的函数参数和[customTreeTable](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customTreeTable.vue)的`evalArgs`属性值
## slot
这是一个自定义列的插槽。
默认情况下,treeTable只有一行行展示数据的功能。但是一般情况下,我们会要给行加上一个操作按钮或者根据当行数据展示不同的样式,这时我们就需要自定义列了。请参考[customTreeTable](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customTreeTable.vue),[实例效果](http://panjiachen.github.io/vue-element-admin/#/example/table/custom-tree-table)
`slot`和`columns属性`可同时存在,columns里面的数据列会在slot自定义列的左边展示
## 其他
如果有其他的需求,请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的api自行修改index.vue
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
毕设vue管理系统前端.zip (239个子文件)
.babelrc 329B
font-awesome.css 37KB
font-awesome.min.css 30KB
reset.css 2KB
index.css 532B
main.css 449B
.editorconfig 243B
fontawesome-webfont.eot 162KB
.eslintignore 34B
401.gif 160KB
.gitattributes 112B
.gitignore 171B
.gitkeep 0B
index.html 6KB
log.ico 4KB
card-3.jpg 141KB
qq.jpg 63KB
card-1.jpg 51KB
we.jpg 49KB
img.jpg 46KB
card-4.jpg 26KB
card-2.jpg 20KB
icon.js 18KB
index.js 9KB
webpack.prod.conf.js 6KB
.eslintrc.js 5KB
request.js 4KB
user.js 4KB
zh.js 4KB
en.js 3KB
index.js 3KB
dishMenu.js 3KB
webpack.base.conf.js 3KB
webpack.dev.conf.js 3KB
permission.js 3KB
utils.js 3KB
order.js 2KB
webpack.test.conf.js 2KB
restaurant.js 2KB
validate.js 2KB
tagsView.js 2KB
store.js 2KB
table.js 2KB
user.js 2KB
global.js 2KB
permission.js 2KB
index.js 2KB
main.js 1KB
app.js 1KB
check-versions.js 1KB
website.js 1KB
index.js 1KB
build.js 1KB
fullScreen.js 1KB
ResizeHandler.js 976B
themeArray.js 930B
dishTable.js 913B
category.js 865B
coupon.js 854B
auth.js 784B
eval.js 775B
eval.js 775B
getters.js 757B
env.js 754B
userTable.js 676B
login.js 657B
users.js 655B
employee.js 601B
i18n.js 592B
index.js 589B
vue-loader.conf.js 553B
index.js 493B
index.js 465B
util.js 422B
.postcssrc.js 246B
area.js 220B
dev.env.js 200B
index.js 188B
common.js 155B
test.env.js 149B
prod.env.js 144B
generateIconsView.js 133B
package.json 4KB
icons.less 49KB
variables.less 22KB
mixins.less 2KB
path.less 771B
animated.less 713B
rotated-flipped.less 622B
bordered-pulled.less 585B
font-awesome.less 495B
stacked.less 476B
core.less 452B
list.less 377B
larger.less 370B
fixed-width.less 119B
screen-reader.less 118B
LICENSE 1KB
readme.md 3KB
README.md 662B
共 239 条
- 1
- 2
- 3
资源评论
马coder
- 粉丝: 1208
- 资源: 6602
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- Kepware.KEPServerEX.v4.264.401.Incl.Keygen-SSG
- 行人重识别-通过顺序决策实现跨域行人重识别算法-附项目源码-优质项目实战.zip
- HTML、CSS制作家乡介绍网页.zip
- 361050291.apk
- 华硕B250 PLUS支持6789代BIOS
- 基于javaScript开发的图书管理系统+数据库+源码+项目展示+开发文档(毕业设计&课程设计&项目开发)
- HTML+CSS制作的个人博客网页 2.zip
- 华硕B250M-PIXIU支持6789代BIOS
- c# winfrom 音量控制 静音
- 【OpenHarmony】 ArkTS 语法基础 ② ( ArkTS 自定义组件 )
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功