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,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,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,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,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,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>