https://github.com/yevin-yu/element-table-plus
一个基于Vue与Element-UI的Table
https://github.com/yevin-yu/element-table-plus
Last synced: over 1 year ago
JSON representation
一个基于Vue与Element-UI的Table
- Host: GitHub
- URL: https://github.com/yevin-yu/element-table-plus
- Owner: Yevin-Yu
- Created: 2024-05-14T12:03:39.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-17T08:16:30.000Z (about 2 years ago)
- Last Synced: 2025-01-20T07:43:05.423Z (over 1 year ago)
- Language: Vue
- Size: 199 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# element-table-plus-demo
## 下载
```shell
npm i element-table-plus-demo
```
## 使用
`main.js`
```js
import elementTablePlus from 'element-table-plus-demo';
import 'element-table-plus-demo/elementTablePlusDemo.css';
Vue.use(elementTablePlus)
```
`App.vue`
```vue
export default {
data() {
return {
option: {},
};
},
created() {
this.option = require("./package/data.json");
},
```
`data.json`
```json
{
"headerData": [
{
"label": "日期",
"prop": "date",
"showOverflowTooltip":true
},
{
"label": "名字",
"prop": "name"
},
{
"label": "成绩",
"children": [
{
"label": "语文",
"prop": "score1"
},
{
"label": "数学",
"prop": "score2"
},
{
"label": "英语",
"prop": "score3"
},
{
"label": "理综",
"children": [
{
"label": "物理",
"prop": "score4"
},
{
"label": "化学",
"prop": "score5"
},
{
"label": "生物",
"prop": "score6"
}
]
}
]
}
],
"tableData": [
{
"date": "2016-05-02",
"name": "王小虎",
"score1": 150,
"score2": 150,
"score3": 150,
"score4": 110,
"score5": 100,
"score6": 90
},
{
"date": "2016-05-04",
"name": "王小明",
"score1": 150,
"score2": 150,
"score3": 150,
"score4": 110,
"score5": 100,
"score6": 90
},
{
"date": "2016-05-01",
"name": "王小丽",
"score1": 150,
"score2": 150,
"score3": 150,
"score4": 110,
"score5": 100,
"score6": 90
},
{
"date": "2016-05-03",
"name": "王小飞",
"score1": 150,
"score2": 150,
"score3": 150,
"score4": 110,
"score5": 100,
"score6": 90
}
]
}
```
