xops1
所属分类：后台框架
开发工具：Vue
文件大小：518KB
下载次数：0
上传日期：2021-05-08 08:28:57
上 传 者：
sh-1993
说明： 克隆代码[https: github.com xufqing rest_xops。升级django至3.x。仅保留基础功能](https: github.com xufqing rest_xops%E3%80%82%E5%8D%87%E7%BA%A7django%E8%87%B33.x%E3%80%82%E4%BB%85%E4%BF%9D%E7%95%99%E5%9F%BA%E7%A1%80%E5%8A%9F%E8%83%BD)
(Clone code [https: github.com xufqing rest_xops. Upgrade django to 3. x. Only basic functions are reserved] (https: github.com xufqing rest_xops% E3% 80% 82% E5% 8D% 87% E7% BA% A7django% E8% 87% B33. x% E3% 80% 82% E4% BB% 85% E4% BF% 9D% E7% 95% 99% E5% 9F% BA% E7% A1% 80% E5% 8A% 9F% E8% 83% BD))
文件列表:
.dockerignore (77, 2021-05-08)
Dockerfile (646, 2021-05-08)
apps (0, 2021-05-08)
apps\common (0, 2021-05-08)
apps\common\__init__.py (0, 2021-05-08)
apps\common\custom.py (3786, 2021-05-08)
apps\rbac (0, 2021-05-08)
apps\rbac\__init__.py (0, 2021-05-08)
apps\rbac\admin.py (63, 2021-05-08)
apps\rbac\apps.py (83, 2021-05-08)
apps\rbac\models.py (3606, 2021-05-08)
apps\rbac\serializers (0, 2021-05-08)
apps\rbac\serializers\__init__.py (398, 2021-05-08)
apps\rbac\serializers\menu_serializer.py (399, 2021-05-08)
apps\rbac\serializers\organization_serializer.py (851, 2021-05-08)
apps\rbac\serializers\permission_serializer.py (337, 2021-05-08)
apps\rbac\serializers\role_serializer.py (629, 2021-05-08)
apps\rbac\serializers\user_serializer.py (2274, 2021-05-08)
apps\rbac\tests.py (60, 2021-05-08)
apps\rbac\urls.py (1288, 2021-05-08)
apps\rbac\views.py (63, 2021-05-08)
apps\rbac\views (0, 2021-05-08)
apps\rbac\views\__init__.py (0, 2021-05-08)
apps\rbac\views\menu.py (1029, 2021-05-08)
apps\rbac\views\organization.py (2291, 2021-05-08)
apps\rbac\views\permission.py (1107, 2021-05-08)
apps\rbac\views\role.py (1078, 2021-05-08)
apps\rbac\views\user.py (14989, 2021-05-08)
docker (0, 2021-05-08)
docker\docker-compose.yml (547, 2021-05-08)
docker\entrypoint.sh (491, 2021-05-08)
docker\my.cnf (153, 2021-05-08)
docker\settings.py (5434, 2021-05-08)
init_data (0, 2021-05-08)
init_data\rbac.menu.json (1626, 2021-05-08)
init_data\rbac.permission.json (4033, 2021-05-08)
init_data\rbac.role.json (232, 2021-05-08)
init_data\rbac.userprofile.json (808, 2021-05-08)
... ...
## 写在前面
此组件仅提供一个创建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](https://github.com/learn0208/xops1/blob/master/./eval.js)
如果提供了evalFunc,那么会用提供的evalFunc去解析data,并返回treeTable渲染所需要的值。如何编写一个evalFunc,请参考[*eval.js*](https://github.com/learn0208/xops1/blob/master/https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/TreeTable/eval.js)或[*customEval.js*](https://github.com/learn0208/xops1/blob/master/https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/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/learn0208/xops1/blob/master/https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/treeTable/customEval.js)的函数参数和[customTreeTable](https://github.com/learn0208/xops1/blob/master/https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/treeTable/customTreeTable.vue)的`evalArgs`属性值
## slot
这是一个自定义列的插槽。
默认情况下,treeTable只有一行行展示数据的功能。但是一般情况下,我们会要给行加上一个操作按钮或者根据当行数据展示不同的样式,这时我们就需要自定义列了。请参考[customTreeTable](https://github.com/learn0208/xops1/blob/master/https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/treeTable/customTreeTable.vue),[实例效果](https://github.com/learn0208/xops1/blob/master/https://panjiachen.github.io/vue-element-admin/#/table/tree-table)
`slot`和`columns属性`可同时存在,columns里面的数据列会在slot自定义列的左边展示
## 其他
如果有其他的需求,请参考[el-table](https://github.com/learn0208/xops1/blob/master/http://element-cn.eleme.io/#/en-US/component/table)的api自行修改index.vue
近期下载者：
相关文件：
收藏者：