调整Table组件说明文档

Aaron
1 parent fc3a7b38
Showing 1 changed file with 54 additions and 0 deletions Show diff stats
examples/views/docs/table.md
@@ -10,6 +10,60 @@
  
 ```html
 <template>
+  <eagle-table ref="table" :value="tableData" :list="tableList" :tableProps="tableProps"></eagle-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        { name: '项伯', address: '大楚小区', postcode: 555, number: '北城1号院' },
+        { name: '项仲', address: '大楚小区', postcode: 555, number: '北城2号院' },
+        { name: '项叔', address: '大楚小区', postcode: 555, number: '北城3号院' },
+        { name: '项季', address: '大楚小区', postcode: 555, number: '北城4号院' },
+      ],
+      tableProps: {
+        border: true
+      },
+      tableList: [
+        { key: 'name', label: '名称',
+          formatter(row, column) {
+            return `${row.name} - ${row.postcode}`;
+          }
+        },
+        { key: 'address', label: '住址' },
+        { key: 'postcode', label: '邮编' },
+        { key: 'number', label: '楼栋号', minWidth: '180' },
+      ]
+    }
+  },
+  mounted() {
+    console.log(this.$refs.table.tableInstance);
+  },
+  methods: {
+    handleSubmit(value) {
+      console.log(value)
+    },
+    handleCancel() {
+      this.$refs.form.reset()
+      console.log('cancel!')
+    }
+  }
+}
+</script>
+```
+
+:::
+
+## 自定义列
+
+表格列可以通过`slot`动态配置，名称对应各列的列名
+
+:::snippet 可以使用`slot`加`slot-scope`的方式，新版vue可以使用`#slotname`的形式
+
+```html
+<template>
   <eagle-table ref="table" :value="tableData" :list="tableList" :tableProps="tableProps">
     <el-table-column type="selection" width="55"></el-table-column>
     <el-table-column type="index" width="50"></el-table-column>
...	...	@@ -10,6 +10,60 @@
10	10
11	11	```html
12	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	67	<eagle-table ref="table" :value="tableData" :list="tableList" :tableProps="tableProps">
14	68	<el-table-column type="selection" width="55"></el-table-column>
15	69	<el-table-column type="index" width="50"></el-table-column>
...	...