frontend / zee

Download as
Browse Code »

Commit 06635e952c971ee59333068419e1c4e860383989

Authored by liuhanchen
1 parent 366ae976
Exists in master and in 1 other branch Feature-渲染优化

chore: 移除废弃文件

Showing 5 changed files with 0 additions and 496 deletions   Show diff stats
packages/table copy/editable.vue
View file @366ae97
... ... @@ -1,217 +0,0 @@
1   -<style lang="scss">
2   -.z-table-column__cell-editable {
3   - display: inline-flex;
4   - align-items: center;
5   - justify-content: space-between;
6   - width: 100%;
7   - .el-icon-edit {
8   - color: rgba(151, 151, 151, 0.5);
9   - &:hover {
10   - color: $primary;
11   - }
12   - }
13   - .el-icon-check {
14   - color: $green;
15   - }
16   - .el-icon-close {
17   - color: $red;
18   - }
19   - .el-icon-edit,
20   - .el-icon-check,
21   - .el-icon-close {
22   - cursor: pointer;
23   - margin-left: 5px;
24   - font-size: 14px;
25   - }
26   -}
27   -</style>
28   -
29   -<template>
30   - <el-table :data="tableData | tableDataFilter" :size="_elSize" v-bind="bindProps" v-on="$listeners" @header-click="onHeaderClick" @cell-click="onCellClick" @cell-dblclick="onCellDblclick">
31   - <slot name="left"></slot>
32   - <template v-for="(item, index) in columns">
33   - <el-table-column v-bind="item" :key="index">
34   - <slot :name="`header-${item.prop}`" slot="header"></slot>
35   - <template #default="{ row, column, $index }">
36   - <cell-editor
37   - :disabled="item.editalways || editall || disabled || item.editable === false"
38   - :editable="item.editalways || editall || (item.editable !== false && row.$editor && row.$editor.includes(item.prop))"
39   - :component="item.component"
40   - :value="row[column.property]"
41   - @input="value => onCellInput(value, row, column, $index)"
42   - @edit-click="setRowEditor(row, column, $index)"
43   - @edit-confirm="value => onEditConfirm(value, row, column, $index)"
44   - >
45   - <template v-if="$scopedSlots[`editor-${item.prop}`]" slot="editor">
46   - <slot :name="`editor-${item.prop}`" :value="row[column.property]" :row="row" :index="$index" :onInput="value => onCellInput(value, row, column, $index)"></slot>
47   - </template>
48   - <template v-if="$scopedSlots[`cell-${item.prop}`]">
49   - <slot :name="`cell-${item.prop}`" :value="row[column.property]" :row="row" :index="$index"></slot>
50   - </template>
51   - <template v-else-if="item.render && typeof item.render === 'function'" #default="{ row, column, $index }">
52   - <cell-render :item="item" :value="get(row, item.prop)" :row="row" :column="column" :index="$index"></cell-render>
53   - </template>
54   - </cell-editor>
55   - </template>
56   - </el-table-column>
57   - </template>
58   - <slot></slot>
59   - <slot name="append"></slot>
60   - </el-table>
61   -</template>
62   -
63   -<script>
64   -import TableNormal from './normal';
65   -import tableProps from './props';
66   -import { cloneDeep, get, set } from '../utils';
67   -
68   -export default {
69   - name: 'TableEditable',
70   - extends: TableNormal,
71   - components: {
72   - cellEditor: {
73   - props: {
74   - value: [String, Number, Array, Object, Boolean],
75   - component: { type: String, default: 'el-input' },
76   - editable: Boolean,
77   - disabled: Boolean,
78   - },
79   - watch: {
80   - editable(val) {
81   - if (!this.disabled && val && this.component === 'el-input') {
82   - this.$nextTick(() => {
83   - this.$children[0] && this.$children[0].focus && this.$children[0].focus();
84   - });
85   - }
86   - },
87   - },
88   - render(h) {
89   - if (this.editable) {
90   - let editorRender = [
91   - h(this.component, {
92   - props: { value: this.value, size: 'mini' },
93   - on: {
94   - input: value => {
95   - this.$emit('input', value);
96   - },
97   - },
98   - }),
99   - ];
100   - if (this.$scopedSlots.editor) {
101   - editorRender = [this.$scopedSlots.editor()];
102   - }
103   - if (!this.disabled) {
104   - const handlerItems = [h('i', { attrs: { title: '确定', class: 'el-icon-check' }, on: { click: () => this.$emit('edit-confirm', this.value) } })];
105   - // handlerItems.push(h('i', { attrs: { title: '取消', class: 'el-icon-close' }, on: { click: () => this.$emit('edit-confirm') } }));
106   - const handler = h('span', handlerItems);
107   - editorRender.push(handler);
108   - }
109   - return h('span', { class: 'z-table-column__cell-editable' }, editorRender);
110   - }
111   - let valueRender = [h('span', this.value)];
112   - if (this.$scopedSlots.default) {
113   - valueRender = [this.$scopedSlots.default()];
114   - }
115   - if (!this.disabled) {
116   - valueRender.push(h('i', { attrs: { title: '编辑', class: 'el-icon-edit' }, on: { click: () => this.$emit('edit-click') } }));
117   - }
118   - return h('span', { class: 'z-table-column__cell-editable' }, valueRender);
119   - },
120   - },
121   - },
122   - props: {
123   - value: {
124   - type: Array,
125   - default() {
126   - return [];
127   - },
128   - },
129   - columns: {
130   - type: Array,
131   - default() {
132   - return [];
133   - },
134   - },
135   - editall: Boolean,
136   - clickable: Boolean,
137   - disabled: Boolean,
138   - ...tableProps,
139   - },
140   - watch: {
141   - value(val) {
142   - this.tableData = val || [];
143   - },
144   - data(val) {
145   - this.tableData = val || [];
146   - },
147   - tableData(val) {
148   - this.$emit('input', val || []);
149   - },
150   - },
151   - data() {
152   - return {
153   - tableData: this.value,
154   - };
155   - },
156   - filters: {
157   - tableDataFilter(value) {
158   - return value.map((item, index) => ({ ...item, $index: index }));
159   - },
160   - },
161   - methods: {
162   - onHeaderClick() {
163   - if (this.clickable) {
164   - this.cancelEditCell();
165   - }
166   - },
167   - onCellClick(row, column) {
168   - if (this.clickable) {
169   - const prop = column.property;
170   - let tableData = cloneDeep(this.tableData);
171   - tableData.forEach((item, index) => {
172   - if (!(index === row.$index && item.$editor && item.$editor.includes(prop))) {
173   - item.$editor = [];
174   - }
175   - });
176   - this.tableData = tableData;
177   - }
178   - },
179   - onCellDblclick(row, column) {
180   - if (this.clickable) {
181   - this.setRowEditor(row, column, row.$index);
182   - }
183   - },
184   - setRowEditor(row, column, index) {
185   - this.cancelEditCell();
186   - let tableRow = this.tableData[index];
187   - if (tableRow) {
188   - if (tableRow.$editor) {
189   - tableRow.$editor = [...tableRow.$editor, column.property];
190   - } else {
191   - tableRow.$editor = [column.property];
192   - }
193   - this.$set(this.tableData, index, tableRow);
194   - }
195   - },
196   - onEditConfirm(value, row, column, index) {
197   - this.$emit('cell-edit-confirm', { row, index, prop: column.property, value });
198   - this.cancelEditCell();
199   - },
200   - cancelEditCell() {
201   - this.tableData = this.tableData.map((item, index) => {
202   - const newItem = cloneDeep(item);
203   - delete newItem.$index;
204   - delete newItem.$editor;
205   - return newItem;
206   - });
207   - },
208   - onCellInput(value, row, column, index) {
209   - const tableData = cloneDeep(this.tableData);
210   - const tableRow = tableData[index];
211   - set(tableRow, column.property, value);
212   - tableData[index] = tableRow;
213   - this.$set(this.tableData, index, tableRow);
214   - },
215   - },
216   -};
217   -</script>
packages/table copy/index.js
View file @366ae97
... ... @@ -1,27 +0,0 @@
1   -import tableProps from './props';
2   -
3   -export default {
4   - name: 'Table',
5   - props: {
6   - value: {
7   - type: Array,
8   - default() {
9   - return [];
10   - },
11   - },
12   - columns: {
13   - type: Array,
14   - default() {
15   - return [];
16   - },
17   - },
18   - editable: Boolean,
19   - editall: Boolean,
20   - clickable: Boolean,
21   - disabled: Boolean,
22   - ...tableProps,
23   - },
24   - render(h) {
25   - return h(`z-table-${this.editable ? 'editable' : 'normal'}`, { props: { ...this._props }, scopedSlots: this.$scopedSlots, on: this.$listeners });
26   - },
27   -};
packages/table copy/normal.vue
View file @366ae97
... ... @@ -1,95 +0,0 @@
1   -<template>
2   - <el-table :data="tableData" :size="_elSize" v-bind="bindProps" v-on="$listeners">
3   - <slot name="left"></slot>
4   - <template v-for="(item, index) in columns">
5   - <el-table-column v-bind="item" :key="index">
6   - <slot :name="`header-${item.prop}`" slot="header"></slot>
7   - <template v-if="$scopedSlots[`cell-${item.prop}`]" #default="{ row, column, $index }">
8   - <slot :name="`cell-${item.prop}`" :value="get(row, item.prop)" :row="row" :column="column" :index="$index"></slot>
9   - </template>
10   - <template v-else-if="item.render && typeof item.render === 'function'" #default="{ row, column, $index }">
11   - <cell-render :item="item" :value="get(row, item.prop)" :row="row" :column="column" :index="$index"></cell-render>
12   - </template>
13   - </el-table-column>
14   - </template>
15   - <slot></slot>
16   - <slot name="append"></slot>
17   - </el-table>
18   -</template>
19   -
20   -<script>
21   -import tableProps from './props';
22   -import { get } from '../utils';
23   -
24   -export default {
25   - name: 'TableNormal',
26   - components: {
27   - CellRender: {
28   - functional: true,
29   - render(h, context) {
30   - const props = context.props;
31   - const item = props.item || {};
32   - const content = item.render(props.value, props.row, h, props.index);
33   - return typeof content === 'string' ? h('span', {}, [content]) : content;
34   - },
35   - },
36   - },
37   - inject: {
38   - elForm: {
39   - default: '',
40   - },
41   - elFormItem: {
42   - default: '',
43   - },
44   - },
45   - props: {
46   - value: {
47   - type: Array,
48   - default() {
49   - return [];
50   - },
51   - },
52   - columns: {
53   - type: Array,
54   - default() {
55   - return [];
56   - },
57   - },
58   - ...tableProps,
59   - },
60   - data() {
61   - return {
62   - tableData: this.value.length > 0 ? this.value : this.data,
63   - };
64   - },
65   - watch: {
66   - value(val) {
67   - this.tableData = val || [];
68   - },
69   - data(val) {
70   - this.tableData = val || [];
71   - },
72   - },
73   - computed: {
74   - _elFormItemSize() {
75   - return (this.elFormItem || {}).elFormItemSize;
76   - },
77   - _elSize() {
78   - return this.size || this._elFormItemSize || (this.elForm || {}).size || (this.$ELEMENT || {}).size;
79   - },
80   - bindProps() {
81   - const tablePropsKeys = Object.keys(tableProps);
82   - let props = {};
83   - Object.keys(this._props).forEach(key => {
84   - if (tablePropsKeys.includes(key)) {
85   - props[key] = this._props[key];
86   - }
87   - });
88   - return props;
89   - },
90   - },
91   - methods: {
92   - get,
93   - },
94   -};
95   -</script>
packages/table copy/props.js
View file @366ae97
... ... @@ -1,62 +0,0 @@
1   -export default {
2   - data: {
3   - type: Array,
4   - default: function() {
5   - return [];
6   - },
7   - },
8   - size: String,
9   - width: [String, Number],
10   - height: [String, Number],
11   - maxHeight: [String, Number],
12   - fit: {
13   - type: Boolean,
14   - default: true,
15   - },
16   - stripe: Boolean,
17   - border: Boolean,
18   - rowKey: [String, Function],
19   - context: {},
20   - showHeader: {
21   - type: Boolean,
22   - default: true,
23   - },
24   - showSummary: Boolean,
25   - sumText: String,
26   - summaryMethod: Function,
27   - rowClassName: [String, Function],
28   - rowStyle: [Object, Function],
29   - cellClassName: [String, Function],
30   - cellStyle: [Object, Function],
31   - headerRowClassName: [String, Function],
32   - headerRowStyle: [Object, Function],
33   - headerCellClassName: [String, Function],
34   - headerCellStyle: [Object, Function],
35   - highlightCurrentRow: Boolean,
36   - currentRowKey: [String, Number],
37   - emptyText: String,
38   - expandRowKeys: Array,
39   - defaultExpandAll: Boolean,
40   - defaultSort: Object,
41   - tooltipEffect: String,
42   - spanMethod: Function,
43   - selectOnIndeterminate: {
44   - type: Boolean,
45   - default: true,
46   - },
47   - indent: {
48   - type: Number,
49   - default: 16,
50   - },
51   - treeProps: {
52   - type: Object,
53   - default() {
54   - return {
55   - hasChildren: 'hasChildren',
56   - children: 'children',
57   - };
58   - },
59   - },
60   - lazy: Boolean,
61   - load: Function,
62   -};
packages/table/normal copy.vue
View file @366ae97
... ... @@ -1,95 +0,0 @@
1   -<template>
2   - <el-table :data="tableData" :size="_elSize" v-bind="bindProps" v-on="$listeners">
3   - <slot name="left"></slot>
4   - <template v-for="(item, index) in columns">
5   - <el-table-column v-bind="item" :key="index">
6   - <slot :name="`header-${item.prop}`" slot="header"></slot>
7   - <template v-if="$scopedSlots[`cell-${item.prop}`]" #default="{ row, column, $index }">
8   - <slot :name="`cell-${item.prop}`" :value="get(row, item.prop)" :row="row" :column="column" :index="$index"></slot>
9   - </template>
10   - <template v-else-if="item.render && typeof item.render === 'function'" #default="{ row, column, $index }">
11   - <cell-render :item="item" :value="get(row, item.prop)" :row="row" :column="column" :index="$index"></cell-render>
12   - </template>
13   - </el-table-column>
14   - </template>
15   - <slot></slot>
16   - <slot name="append"></slot>
17   - </el-table>
18   -</template>
19   -
20   -<script>
21   -import tableProps from './props';
22   -import { get } from '../utils';
23   -
24   -export default {
25   - name: 'TableNormal',
26   - components: {
27   - CellRender: {
28   - functional: true,
29   - render(h, context) {
30   - const props = context.props;
31   - const item = props.item || {};
32   - const content = item.render(props.value, props.row, h, props.index);
33   - return typeof content === 'string' ? h('span', {}, [content]) : content;
34   - },
35   - },
36   - },
37   - inject: {
38   - elForm: {
39   - default: '',
40   - },
41   - elFormItem: {
42   - default: '',
43   - },
44   - },
45   - props: {
46   - value: {
47   - type: Array,
48   - default() {
49   - return [];
50   - },
51   - },
52   - columns: {
53   - type: Array,
54   - default() {
55   - return [];
56   - },
57   - },
58   - ...tableProps,
59   - },
60   - data() {
61   - return {
62   - tableData: this.value.length > 0 ? this.value : this.data,
63   - };
64   - },
65   - watch: {
66   - value(val) {
67   - this.tableData = val || [];
68   - },
69   - data(val) {
70   - this.tableData = val || [];
71   - },
72   - },
73   - computed: {
74   - _elFormItemSize() {
75   - return (this.elFormItem || {}).elFormItemSize;
76   - },
77   - _elSize() {
78   - return this.size || this._elFormItemSize || (this.elForm || {}).size || (this.$ELEMENT || {}).size;
79   - },
80   - bindProps() {
81   - const tablePropsKeys = Object.keys(tableProps);
82   - let props = {};
83   - Object.keys(this._props).forEach(key => {
84   - if (tablePropsKeys.includes(key)) {
85   - props[key] = this._props[key];
86   - }
87   - });
88   - return props;
89   - },
90   - },
91   - methods: {
92   - get,
93   - },
94   -};
95   -</script>