Commit bfe60bf3cf86d0807146db4b7c49b3b3a523af75
1 parent
fc3a7b38
Exists in
master
and in
1 other branch
调整Table组件说明文档
Showing
1 changed file
with
54 additions
and
0 deletions
Show diff stats
examples/views/docs/table.md
| @@ -10,6 +10,60 @@ | @@ -10,6 +10,60 @@ | ||
| 10 | 10 | ||
| 11 | ```html | 11 | ```html |
| 12 | <template> | 12 | <template> |
| 13 | + <eagle-table ref="table" :value="tableData" :list="tableList" :tableProps="tableProps"></eagle-table> | ||
| 14 | +</template> | ||
| 15 | + | ||
| 16 | +<script> | ||
| 17 | +export default { | ||
| 18 | + data() { | ||
| 19 | + return { | ||
| 20 | + tableData: [ | ||
| 21 | + { name: '项伯', address: '大楚小区', postcode: 555, number: '北城1号院' }, | ||
| 22 | + { name: '项仲', address: '大楚小区', postcode: 555, number: '北城2号院' }, | ||
| 23 | + { name: '项叔', address: '大楚小区', postcode: 555, number: '北城3号院' }, | ||
| 24 | + { name: '项季', address: '大楚小区', postcode: 555, number: '北城4号院' }, | ||
| 25 | + ], | ||
| 26 | + tableProps: { | ||
| 27 | + border: true | ||
| 28 | + }, | ||
| 29 | + tableList: [ | ||
| 30 | + { key: 'name', label: '名称', | ||
| 31 | + formatter(row, column) { | ||
| 32 | + return `${row.name} - ${row.postcode}`; | ||
| 33 | + } | ||
| 34 | + }, | ||
| 35 | + { key: 'address', label: '住址' }, | ||
| 36 | + { key: 'postcode', label: '邮编' }, | ||
| 37 | + { key: 'number', label: '楼栋号', minWidth: '180' }, | ||
| 38 | + ] | ||
| 39 | + } | ||
| 40 | + }, | ||
| 41 | + mounted() { | ||
| 42 | + console.log(this.$refs.table.tableInstance); | ||
| 43 | + }, | ||
| 44 | + methods: { | ||
| 45 | + handleSubmit(value) { | ||
| 46 | + console.log(value) | ||
| 47 | + }, | ||
| 48 | + handleCancel() { | ||
| 49 | + this.$refs.form.reset() | ||
| 50 | + console.log('cancel!') | ||
| 51 | + } | ||
| 52 | + } | ||
| 53 | +} | ||
| 54 | +</script> | ||
| 55 | +``` | ||
| 56 | + | ||
| 57 | +::: | ||
| 58 | + | ||
| 59 | +## 自定义列 | ||
| 60 | + | ||
| 61 | +表格列可以通过`slot`动态配置，名称对应各列的列名 | ||
| 62 | + | ||
| 63 | +:::snippet 可以使用`slot`加`slot-scope`的方式，新版vue可以使用`#slotname`的形式 | ||
| 64 | + | ||
| 65 | +```html | ||
| 66 | +<template> | ||
| 13 | <eagle-table ref="table" :value="tableData" :list="tableList" :tableProps="tableProps"> | 67 | <eagle-table ref="table" :value="tableData" :list="tableList" :tableProps="tableProps"> |
| 14 | <el-table-column type="selection" width="55"></el-table-column> | 68 | <el-table-column type="selection" width="55"></el-table-column> |
| 15 | <el-table-column type="index" width="50"></el-table-column> | 69 | <el-table-column type="index" width="50"></el-table-column> |