framework / eagle-web-toolkit

Download as
Browse Code »

Commit 3b6c0c2778eb8c3b353a65e4fff4e59b1218f66c

Authored by Aaron
1 parent 140ecdfb
Exists in master and in 1 other branch legacy

新增Table组件

Showing 6 changed files with 177 additions and 3 deletions   Show diff stats
examples/router/routes.js
  Diff comments   View file @3b6c0c2
... ... @@ -24,6 +24,12 @@ const _components = [
24 24 meta: { title: 'Form 表单' },
25 25 component: () => import('@/views/docs/form.md'),
26 26 },
  27 + {
  28 + path: 'table',
  29 + name: 'table',
  30 + meta: { title: 'Table 表格' },
  31 + component: () => import('@/views/docs/table.md'),
  32 + },
27 33 ]
28 34 }
29 35 ]
... ...
examples/views/docs/form.md
  Diff comments   View file @3b6c0c2
... ... @@ -57,6 +57,7 @@ export default {
57 57 return {
58 58 formList: [
59 59 { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
  60 + { type: 'el-input', key: 'gender', label: '性别', group: { label: '身体状况', icon: 'edit' } },
60 61 { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] }, group: '详细地址' },
61 62 { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" }, group: '详细地址' },
62 63 { type: 'el-input', key: 'number', label: '楼栋号', group: '详细地址' },
... ...
examples/views/docs/table.md 0 → 100644
  Diff comments   View file @3b6c0c2
... ... @@ -0,0 +1,90 @@
  1 +# Table 表格
  2 +
  3 +不同于常规Table组件，本组件采用配置列表的方式实现表格快速配置
  4 +
  5 +## 基础用法
  6 +
  7 +表格列可以通过`list`动态配置
  8 +
  9 +:::snippet 使用`list`属性设置数据源，每一项都已设置为**el-table-column**，数据源格式与`Form`相同
  10 +
  11 +```html
  12 +<template>
  13 + <eagle-table ref="table" :value="tableData" :list="tableList" :tableProps="tableProps">
  14 + <el-table-column type="selection" width="55"></el-table-column>
  15 + <el-table-column type="index" width="50"></el-table-column>
  16 + <template #postcode="{ label, key }">
  17 + <el-table-column prop="postcode" label="家属院" min-width="200">
  18 + <template slot-scope="{ row: { postcode, number }, $index }"> <!-- 由于渲染问题，这里没有显示出来 -->
  19 + <span style="color: orange">{{ $index }}</span>
  20 + <span style="color: blue">{{ label }}</span>
  21 + <span style="color: red">{{ key }}</span>
  22 + <span>{{ number }}</span>
  23 + <span>{{ postcode }}</span>
  24 + </template>
  25 + </el-table-column>
  26 + </template>
  27 + </eagle-table>
  28 +</template>
  29 +
  30 +<script>
  31 +export default {
  32 + data() {
  33 + return {
  34 + tableData: [
  35 + { name: '项伯', address: '大楚小区', postcode: 555, number: '北城1号院' },
  36 + { name: '项仲', address: '大楚小区', postcode: 555, number: '北城2号院' },
  37 + { name: '项叔', address: '大楚小区', postcode: 555, number: '北城3号院' },
  38 + { name: '项季', address: '大楚小区', postcode: 555, number: '北城4号院' },
  39 + ],
  40 + tableProps: {
  41 + border: true
  42 + },
  43 + tableList: [
  44 + { key: 'name', label: '名称',
  45 + formatter(row, column) {
  46 + return `${row.name} - ${row.postcode}`;
  47 + }
  48 + },
  49 + { key: 'address', label: '住址' },
  50 + { key: 'postcode', label: '邮编' },
  51 + { key: 'number', label: '楼栋号', minWidth: '180' },
  52 + ]
  53 + }
  54 + },
  55 + mounted() {
  56 + console.log(this.$refs.table.tableInstance);
  57 + },
  58 + methods: {
  59 + handleSubmit(value) {
  60 + console.log(value)
  61 + },
  62 + handleCancel() {
  63 + this.$refs.form.reset()
  64 + console.log('cancel!')
  65 + }
  66 + }
  67 +}
  68 +</script>
  69 +```
  70 +
  71 +:::
  72 +
  73 +
  74 +## Attribute 属性
  75 +
  76 +参数|说明|类型|可选值|默认值
  77 +-|-|-|-|-
  78 +list | 表单项配置列表 | Array | - | []
  79 +tableProps | ElementUI表格属性 | Object | - | { size: 'small' }
  80 +tableEvents | ElementUI表格事件 | Object | - | {}
  81 +
  82 +## List 表单项配置列表
  83 +
  84 +配置方法与Form组件基本相同，有部分属性删减
  85 +
  86 +参数|说明|类型|可选值|默认值
  87 +-|-|-|-|-
  88 +key | 参数名 | String | - | -
  89 +label | 参数标签 | String | - | -
  90 +其它参数 | ElementUI表格项的属性 | Any | - | -
0 91 \ No newline at end of file
... ...
packages/form/index.vue
  Diff comments   View file @3b6c0c2
... ... @@ -8,6 +8,9 @@
8 8 border-bottom: 1px solid #d9d9d9;
9 9 margin-bottom: 30px;
10 10 }
  11 +.eagle-form__group-icon {
  12 + padding-right: 10px;
  13 +}
11 14 .eagle-form__group-content {
12 15 margin: 15px 0px;
13 16 }
... ... @@ -19,7 +22,10 @@
19 22 <template v-for="(data, index) in listOption.dataList">
20 23 <template v-if="listOption.isGroup">
21 24 <slot v-if="$scopedSlots[data.key] || $slots[data.key]" :name="data.key" v-bind="data"></slot>
22   - <el-col v-else class="eagle-form__group-title" :key="data.key" :span="24">{{ data.label }}</el-col>
  25 + <el-col v-else class="eagle-form__group-title" :key="data.key" :span="24">
  26 + <i v-if="data.icon" :class="`el-icon-${data.icon} eagle-form__group-icon`"></i>
  27 + <span>{{ data.label }}</span>
  28 + </el-col>
23 29 </template>
24 30 <el-row :class="{ 'eagle-form__group-content': listOption.isGroup }" :key="'group-content-' + index" :gutter="15">
25 31 <template v-for="(item, index) in data.list">
... ... @@ -95,7 +101,7 @@ export default {
95 101 this.model[key] = val ? val[key] : undefined;
96 102 });
97 103 },
98   - // 配置列表又改动时初始化表单模型
  104 + // 配置列表有改动时初始化表单模型
99 105 list(value) {
100 106 this.initModel(value);
101 107 },
... ... @@ -124,7 +130,7 @@ export default {
124 130 if (typeof data.group === 'object') {
125 131 if (!groupSet[`group-${data.group.key}`]) {
126 132 groupSet[`group-${data.group.key}`] = {
127   - label: data.group.label,
  133 + ...data.group,
128 134 list: []
129 135 };
130 136 }
... ...
packages/index.js
  Diff comments   View file @3b6c0c2
... ... @@ -11,6 +11,7 @@ import RadioGroup from &#39;./radio-group&#39;
11 11 import Select from './select'
12 12 import StatusIndicator from './status-indicator'
13 13 import SwitchButton from './switch-button'
  14 +import Table from './table'
14 15 import TreeSelect from './tree-select'
15 16  
16 17 const components = {
... ... @@ -27,6 +28,7 @@ const components = {
27 28 Select,
28 29 StatusIndicator,
29 30 SwitchButton,
  31 + Table,
30 32 TreeSelect
31 33 }
32 34  
... ...
packages/table/index.vue 0 → 100644
  Diff comments   View file @3b6c0c2
... ... @@ -0,0 +1,69 @@
  1 +<style>
  2 +.eagle-table {
  3 + width: 100%;
  4 +}
  5 +</style>
  6 +
  7 +<template>
  8 + <el-table class="eagle-table" ref="table" :data="tableData" v-bind="tableProps" v-on="tableEvents">
  9 + <slot></slot>
  10 + <template v-if="list && list.length > 0">
  11 + <template v-for="(item, index) in list">
  12 + <slot v-if="$scopedSlots[item.key] || $slots[item.key]" :name="item.key" v-bind="item" :row="item"></slot>
  13 + <el-table-column v-else v-bind="item" :prop="item.key" :key="index" :min-width="item.minWidth || '120'"></el-table-column>
  14 + </template>
  15 + </template>
  16 + </el-table>
  17 +</template>
  18 +
  19 +<script>
  20 +export default {
  21 + name: 'Table',
  22 + props: {
  23 + // 用于实例化本组件绑定v-model的值
  24 + value: Array,
  25 + // 配置列表
  26 + list: {
  27 + type: Array,
  28 + required: true
  29 + },
  30 + // 表格参数
  31 + tableProps: {
  32 + type: Object,
  33 + default() {
  34 + return {
  35 + size: 'small',
  36 + }
  37 + }
  38 + },
  39 + // 表格事件
  40 + tableEvents: Object,
  41 + },
  42 + watch: {
  43 + // 组件外部v-model值更新后同步刷新model
  44 + value(val) {
  45 + this.tableData = val || [];
  46 + },
  47 + },
  48 + mounted() {
  49 + this.tableData = this.value || [];
  50 + },
  51 + computed: {
  52 + // 表格实体
  53 + tableInstance: {
  54 + get() {
  55 + return this.$refs.table;
  56 + }
  57 + }
  58 + },
  59 + data() {
  60 + return {
  61 + // 表格数据
  62 + tableData: [],
  63 + };
  64 + },
  65 + methods: {
  66 +
  67 + }
  68 +};
  69 +</script>
0 70 \ No newline at end of file
... ...