frontend / zee

Download as
Browse Code »

Commit 2c3347401db5b54a1921e6c814a32416db8fa364

Authored by 刘汉宸
1 parent 8657d1e9
Exists in master and in 2 other branches Feature-渲染优化, Refactor-2.0

feat: 优化部分组件

Showing 13 changed files with 126 additions and 52 deletions   Show diff stats
examples/views/docs/component/select.md
  Diff comments   View file @2c33474
@@ -433,7 +433,7 @@ export default { @@ -433,7 +433,7 @@ export default {
433 }, 433 },
434 methods: { 434 methods: {
435 beforeQuery(query) { 435 beforeQuery(query) {
436 - console.log(query.length); 436 + // 输入两个字符以上才执行查询
437 return query.length > 2; 437 return query.length > 2;
438 }, 438 },
439 queryAPI(val) { 439 queryAPI(val) {
examples/views/docs/component/table.md
  Diff comments   View file @2c33474
@@ -47,7 +47,14 @@ export default { @@ -47,7 +47,14 @@ export default {
47 <el-form size="mini"> 47 <el-form size="mini">
48 <el-row> 48 <el-row>
49 <el-col :span="18"> 49 <el-col :span="18">
50 - <z-table :value="tableData" type="editable" border :columns="columns"></z-table> 50 + <z-table v-model="tableData" type="editable" border :columns="columns">
  51 + <template #column-editor-gender="{ value, onInput }">
  52 + <el-radio-group size="mini" :value="value" @input="onInput">
  53 + <el-radio-button label="男">男</el-radio-button>
  54 + <el-radio-button label="女">女</el-radio-button>
  55 + </el-radio-group>
  56 + </template>
  57 + </z-table>
51 </el-col> 58 </el-col>
52 <el-col :span="6" style="padding-left: 10px"> 59 <el-col :span="6" style="padding-left: 10px">
53 <pre class="demo-model">{{ tableData }}</pre> 60 <pre class="demo-model">{{ tableData }}</pre>
@@ -61,12 +68,12 @@ export default { @@ -61,12 +68,12 @@ export default {
61 data() { 68 data() {
62 return { 69 return {
63 tableData: [ 70 tableData: [
64 - { name: '张三', age: '31', gender: '男' },  
65 - { name: '李四', age: '27', gender: '女' },  
66 - { name: '王五', age: '16', gender: '男' }, 71 + { name: '张三', age: 31, gender: '男' },
  72 + { name: '李四', age: 27, gender: '女' },
  73 + { name: '王五', age: 16, gender: '男' },
67 ], 74 ],
68 columns: [ 75 columns: [
69 - { prop: 'name', label: '姓名' }, 76 + { prop: 'name', label: '姓名', editable: false },
70 { type: 'el-input-number', prop: 'age', label: '年龄' }, 77 { type: 'el-input-number', prop: 'age', label: '年龄' },
71 { prop: 'gender', label: '性别' }, 78 { prop: 'gender', label: '性别' },
72 ] 79 ]
packages/form/index.vue
  Diff comments   View file @2c33474
1 <template> 1 <template>
2 - <el-form ref="form" :model="model" class="zee-form" v-bind="$attrs"> 2 + <el-form ref="form" :model="model" class="z-form" v-bind="$attrs">
3 <slot v-if="$slots.row" name="row"></slot> 3 <slot v-if="$slots.row" name="row"></slot>
4 <el-row v-else v-bind="row"> 4 <el-row v-else v-bind="row">
5 <slot></slot> 5 <slot></slot>
packages/scheme-filter/index.vue
  Diff comments   View file @2c33474
1 <template> 1 <template>
2 <z-scheme-form 2 <z-scheme-form
3 v-model="model" 3 v-model="model"
4 - class="zee-scheme-filter" 4 + class="z-scheme-filter"
5 :list="formattedList" 5 :list="formattedList"
6 :span="span" 6 :span="span"
7 :labelWidth="labelWidth" 7 :labelWidth="labelWidth"
@@ -16,7 +16,7 @@ @@ -16,7 +16,7 @@
16 </template> 16 </template>
17 <slot v-else :name="key" :slot="key"></slot> 17 <slot v-else :name="key" :slot="key"></slot>
18 </template> 18 </template>
19 - <div v-if="!slotKeys.includes('operation')" slot="operation" class="zee-scheme-filter__button-group"> 19 + <div v-if="!slotKeys.includes('operation')" slot="operation" class="z-scheme-filter__button-group">
20 <el-button-group :size="size"> 20 <el-button-group :size="size">
21 <el-button type="primary" @click="handleSearch" :loading="loading" icon="el-icon-search"><span>查询</span></el-button> 21 <el-button type="primary" @click="handleSearch" :loading="loading" icon="el-icon-search"><span>查询</span></el-button>
22 <el-button @click="handleReset"><span>重置</span></el-button> 22 <el-button @click="handleReset"><span>重置</span></el-button>
@@ -96,9 +96,9 @@ export default { @@ -96,9 +96,9 @@ export default {
96 colVisibleRender(item, index) { 96 colVisibleRender(item, index) {
97 if (this.collapsed) { 97 if (this.collapsed) {
98 const visibleNumber = this.visibleNum ? this.visibleNum - 1 : 2; 98 const visibleNumber = this.visibleNum ? this.visibleNum - 1 : 2;
99 - return index > visibleNumber && index < this.list.length ? 'zee-scheme-filter__item hidden' : 'zee-scheme-filter__item'; 99 + return index > visibleNumber && index < this.list.length ? 'z-scheme-filter__item hidden' : 'z-scheme-filter__item';
100 } 100 }
101 - return 'zee-scheme-filter__item'; 101 + return 'z-scheme-filter__item';
102 }, 102 },
103 // 搜索 103 // 搜索
104 handleSearch() { 104 handleSearch() {
@@ -118,10 +118,10 @@ export default { @@ -118,10 +118,10 @@ export default {
118 </script> 118 </script>
119 119
120 <style> 120 <style>
121 -.zee-scheme-filter__item.hidden { 121 +.z-scheme-filter__item.hidden {
122 display: none; 122 display: none;
123 } 123 }
124 -.zee-scheme-filter__button-group { 124 +.z-scheme-filter__button-group {
125 width: 100%; 125 width: 100%;
126 box-sizing: border-box; 126 box-sizing: border-box;
127 text-align: right; 127 text-align: right;
packages/scheme-form/index.vue
  Diff comments   View file @2c33474
1 <style lang="scss"> 1 <style lang="scss">
2 -.zee-scheme-form { 2 +.z-scheme-form {
3 &__flex-wrap { 3 &__flex-wrap {
4 display: flex; 4 display: flex;
5 flex-wrap: wrap; 5 flex-wrap: wrap;
@@ -26,7 +26,7 @@ @@ -26,7 +26,7 @@
26 <template> 26 <template>
27 <el-form 27 <el-form
28 ref="form" 28 ref="form"
29 - class="zee-scheme-form" 29 + class="z-scheme-form"
30 :size="size" 30 :size="size"
31 :class="formClass" 31 :class="formClass"
32 :model="formModel" 32 :model="formModel"
@@ -52,7 +52,7 @@ @@ -52,7 +52,7 @@
52 > 52 >
53 <slot v-for="key in slotKeys" :name="key" :slot="key"></slot> 53 <slot v-for="key in slotKeys" :name="key" :slot="key"></slot>
54 </scheme-form-render> 54 </scheme-form-render>
55 - <div v-if="$scopedSlots.footer" class="zee-scheme-form__footer"> 55 + <div v-if="$scopedSlots.footer" class="z-scheme-form__footer">
56 <slot name="footer" :size="size" :validate="validate" :reset="reset" :model="model"></slot> 56 <slot name="footer" :size="size" :validate="validate" :reset="reset" :model="model"></slot>
57 </div> 57 </div>
58 </el-form> 58 </el-form>
packages/scheme-form/scheme-form-render.vue
  Diff comments   View file @2c33474
1 <template> 1 <template>
2 <!-- 在row上使用flex，防止表单组件大小不一导致错位 --> 2 <!-- 在row上使用flex，防止表单组件大小不一导致错位 -->
3 - <component :is="rowComponent" class="zee-scheme-form__flex-wrap"> 3 + <component :is="rowComponent" class="z-scheme-form__flex-wrap">
4 <template v-for="(item, index) in list"> 4 <template v-for="(item, index) in list">
5 <!-- 表单项有设置分组时 --> 5 <!-- 表单项有设置分组时 -->
6 <component 6 <component
@@ -11,9 +11,9 @@ @@ -11,9 +11,9 @@
11 :style="{ width: type === 'div' ? '100%' : undefined }" 11 :style="{ width: type === 'div' ? '100%' : undefined }"
12 :class="colClassRender(item, index, colClass)" 12 :class="colClassRender(item, index, colClass)"
13 > 13 >
14 - <component :is="rowComponent" class="zee-scheme-form__flex-wrap" :class="groupClass || 'zee-scheme-form__group'"> 14 + <component :is="rowComponent" class="z-scheme-form__flex-wrap" :class="groupClass || 'z-scheme-form__group'">
15 <!-- 表单分组标题 --> 15 <!-- 表单分组标题 -->
16 - <component :is="rowComponent" :class="titleClass || 'zee-scheme-form__group-title'" v-if="item.group.title" style="width: 100%;"> 16 + <component :is="rowComponent" :class="titleClass || 'z-scheme-form__group-title'" v-if="item.group.title" style="width: 100%;">
17 {{ item.group.title || item.group }} 17 {{ item.group.title || item.group }}
18 </component> 18 </component>
19 <!-- 递归本组件 --> 19 <!-- 递归本组件 -->
@@ -22,7 +22,7 @@ @@ -22,7 +22,7 @@
22 :item-class="itemClass" 22 :item-class="itemClass"
23 :content-class="contentClass" 23 :content-class="contentClass"
24 :group-class="groupClass" 24 :group-class="groupClass"
25 - :class="contentClass || 'zee-scheme-form__group-content'" 25 + :class="contentClass || 'z-scheme-form__group-content'"
26 :list="item.list" 26 :list="item.list"
27 :value="value" 27 :value="value"
28 :model="itemKey ? model[itemKey] || {} : model" 28 :model="itemKey ? model[itemKey] || {} : model"
@@ -46,7 +46,7 @@ @@ -46,7 +46,7 @@
46 :style="{ width: type === 'div' && item.style && item.style.width.includes('%') ? item.style.width : undefined, paddingRight: '10px' }" 46 :style="{ width: type === 'div' && item.style && item.style.width.includes('%') ? item.style.width : undefined, paddingRight: '10px' }"
47 :class="colClassRender(item, index, colClass)" 47 :class="colClassRender(item, index, colClass)"
48 > 48 >
49 - <el-form-item :label="item.label" :label-width="item.labelWidth" :prop="item.fullKey" :rules="item | bindItemRulesFilter(model)" :class="itemClass || 'zee-scheme-form__item'"> 49 + <el-form-item :label="item.label" :label-width="item.labelWidth" :prop="item.fullKey" :rules="item | bindItemRulesFilter(model)" :class="itemClass || 'z-scheme-form__item'">
50 <slot v-if="$scopedSlots[item.fullKey]" :name="item.fullKey" :value="itemValue(item)" :model1="value"></slot> 50 <slot v-if="$scopedSlots[item.fullKey]" :name="item.fullKey" :value="itemValue(item)" :model1="value"></slot>
51 <template v-else> 51 <template v-else>
52 <!-- 自定义组件 --> 52 <!-- 自定义组件 -->
packages/scheme-table/cell-editable.vue
  Diff comments   View file @2c33474
1 <style> 1 <style>
2 -.zee-table-cell-editable { 2 +.z-table-cell-editable {
3 display: flex; 3 display: flex;
4 align-items: center; 4 align-items: center;
5 } 5 }
6 -.zee-table-cell-editable .zee-table-cell-editable__icon { 6 +.z-table-cell-editable .z-table-cell-editable__icon {
7 cursor: pointer; 7 cursor: pointer;
8 vertical-align: middle; 8 vertical-align: middle;
9 padding-left: 5px; 9 padding-left: 5px;
@@ -14,10 +14,10 @@ @@ -14,10 +14,10 @@
14 <template> 14 <template>
15 <div> 15 <div>
16 <!-- 可编辑状态 --> 16 <!-- 可编辑状态 -->
17 - <div v-if="editable" class="zee-table-cell-editable"> 17 + <div v-if="editable" class="z-table-cell-editable">
18 <component :value="$_get(row, item.fullKey)" :is="item.type" v-bind="item.props" :style="item.style" size="mini" @input="onInput"></component> 18 <component :value="$_get(row, item.fullKey)" :is="item.type" v-bind="item.props" :style="item.style" size="mini" @input="onInput"></component>
19 <span v-if="btnVisible !== false" @click="onConfirm"> 19 <span v-if="btnVisible !== false" @click="onConfirm">
20 - <svg class="zee-table-cell-editable__icon" viewBox="0 0 1024 1024" width="24" height="24"> 20 + <svg class="z-table-cell-editable__icon" viewBox="0 0 1024 1024" width="24" height="24">
21 <path d="M235.946667 472.938667l-45.226667 45.312 210.090667 209.514666 432.362666-427.690666-45.013333-45.482667-387.157333 382.976z"></path> 21 <path d="M235.946667 472.938667l-45.226667 45.312 210.090667 209.514666 432.362666-427.690666-45.013333-45.482667-387.157333 382.976z"></path>
22 </svg> 22 </svg>
23 </span> 23 </span>
packages/scheme-table/editable.vue
  Diff comments   View file @2c33474
1 <style> 1 <style>
2 -.zee-table { 2 +.z-table {
3 width: 100%; 3 width: 100%;
4 } 4 }
5 </style> 5 </style>
@@ -14,7 +14,7 @@ @@ -14,7 +14,7 @@
14 <el-button @click="handleDelete" size="mini" type="danger" v-if="tableSelection.length > 0">删除</el-button> 14 <el-button @click="handleDelete" size="mini" type="danger" v-if="tableSelection.length > 0">删除</el-button>
15 </div> 15 </div>
16 <el-table 16 <el-table
17 - class="zee-table" 17 + class="z-table"
18 ref="table" 18 ref="table"
19 :data="tableData" 19 :data="tableData"
20 v-bind="{ size: 'small', ...tableProps }" 20 v-bind="{ size: 'small', ...tableProps }"
packages/scheme-table/index.vue
  Diff comments   View file @2c33474
1 <style> 1 <style>
2 -.zee-scheme-table { 2 +.z-scheme-table {
3 width: 100%; 3 width: 100%;
4 } 4 }
5 </style> 5 </style>
6 6
7 <template> 7 <template>
8 <el-table 8 <el-table
9 - class="zee-scheme-table" 9 + class="z-scheme-table"
10 ref="table" 10 ref="table"
11 :data="tableData" 11 :data="tableData"
12 v-bind="{ size, ...tableProps }" 12 v-bind="{ size, ...tableProps }"
packages/scheme/index.scss
  Diff comments   View file @2c33474
1 -.zee-scheme { 1 +.z-scheme {
2 &__header { 2 &__header {
3 margin-bottom: 10px; 3 margin-bottom: 10px;
4 } 4 }
packages/scheme/index.vue
  Diff comments   View file @2c33474
@@ -3,13 +3,13 @@ @@ -3,13 +3,13 @@
3 </style> 3 </style>
4 4
5 <template> 5 <template>
6 - <div class="zee-scheme"> 6 + <div class="z-scheme">
7 <!-- 头部内容 --> 7 <!-- 头部内容 -->
8 - <div v-if="$scopedSlots.header || $slots.header" class="zee-scheme__header"> 8 + <div v-if="$scopedSlots.header || $slots.header" class="z-scheme__header">
9 <slot name="header" :filterModel="filterModel" v-bind="_slotScope"></slot> 9 <slot name="header" :filterModel="filterModel" v-bind="_slotScope"></slot>
10 </div> 10 </div>
11 <!-- 筛选组件 --> 11 <!-- 筛选组件 -->
12 - <div v-if="filter" class="zee-scheme__filter"> 12 + <div v-if="filter" class="z-scheme__filter">
13 <z-scheme-filter 13 <z-scheme-filter
14 :value="_filterModel" 14 :value="_filterModel"
15 :list="filterList || listMap.filter | noRulesFilter" 15 :list="filterList || listMap.filter | noRulesFilter"
@@ -22,7 +22,7 @@ @@ -22,7 +22,7 @@
22 ></z-scheme-filter> 22 ></z-scheme-filter>
23 </div> 23 </div>
24 <!-- 按钮区 --> 24 <!-- 按钮区 -->
25 - <div v-if="action" class="zee-scheme__action"> 25 + <div v-if="action" class="z-scheme__action">
26 <slot v-if="hadSlot('action')" name="action" v-bind="_slotScope"></slot> 26 <slot v-if="hadSlot('action')" name="action" v-bind="_slotScope"></slot>
27 <template v-else> 27 <template v-else>
28 <el-button :size="size" type="primary" @click="openNew">新增</el-button> 28 <el-button :size="size" type="primary" @click="openNew">新增</el-button>
@@ -31,7 +31,7 @@ @@ -31,7 +31,7 @@
31 </template> 31 </template>
32 </div> 32 </div>
33 <!-- 表格内容 --> 33 <!-- 表格内容 -->
34 - <div class="zee-scheme__table"> 34 + <div class="z-scheme__table">
35 <z-scheme-table 35 <z-scheme-table
36 ref="table" 36 ref="table"
37 v-model="tableData" 37 v-model="tableData"
@@ -65,7 +65,7 @@ @@ -65,7 +65,7 @@
65 <template #column-end> 65 <template #column-end>
66 <slot slot="column-end" name="column-end" v-bind="_slotScope"></slot> 66 <slot slot="column-end" name="column-end" v-bind="_slotScope"></slot>
67 <el-table-column v-if="operation" prop="$operation" label="操作" v-bind="{ width: 100, fixed: 'right', ...operationProps }"> 67 <el-table-column v-if="operation" prop="$operation" label="操作" v-bind="{ width: 100, fixed: 'right', ...operationProps }">
68 - <div class="zee-scheme__table-operation" slot-scope="slotScope"> 68 + <div class="z-scheme__table-operation" slot-scope="slotScope">
69 <slot name="operation-button" v-bind="{ ..._slotScope, slotScope }"></slot> 69 <slot name="operation-button" v-bind="{ ..._slotScope, slotScope }"></slot>
70 <el-button type="text" icon="el-icon-edit" title="编辑" @click="openEdit(slotScope.row)"></el-button> 70 <el-button type="text" icon="el-icon-edit" title="编辑" @click="openEdit(slotScope.row)"></el-button>
71 <el-popconfirm confirmButtonText="确定" cancelButtonText="取消" title="确定删除吗？" placement="top" @confirm="handleDelete([slotScope.row])"> 71 <el-popconfirm confirmButtonText="确定" cancelButtonText="取消" title="确定删除吗？" placement="top" @confirm="handleDelete([slotScope.row])">
@@ -78,7 +78,7 @@ @@ -78,7 +78,7 @@
78 </z-scheme-table> 78 </z-scheme-table>
79 </div> 79 </div>
80 <!-- 底部区域 --> 80 <!-- 底部区域 -->
81 - <div class="zee-scheme__footer"> 81 + <div class="z-scheme__footer">
82 <div v-if="selection.length > 0" class="selection-info"> 82 <div v-if="selection.length > 0" class="selection-info">
83 <span>已选中</span> 83 <span>已选中</span>
84 <span class="num">{{ selection.length }}</span> 84 <span class="num">{{ selection.length }}</span>
@@ -142,7 +142,7 @@ @@ -142,7 +142,7 @@
142 <template v-else> 142 <template v-else>
143 <z-form 143 <z-form
144 ref="form" 144 ref="form"
145 - class="zee-scheme__view" 145 + class="z-scheme__view"
146 :value="_formModel" 146 :value="_formModel"
147 :list="viewList || listMap.form | viewTypeFilter | noRulesFilter" 147 :list="viewList || listMap.form | viewTypeFilter | noRulesFilter"
148 v-bind="{ span: 12, 'label-width': '110px', ...viewProps }" 148 v-bind="{ span: 12, 'label-width': '110px', ...viewProps }"
@@ -161,7 +161,7 @@ @@ -161,7 +161,7 @@
161 </template> 161 </template>
162 </template> 162 </template>
163 <!-- 内置弹出框新增修改按钮 --> 163 <!-- 内置弹出框新增修改按钮 -->
164 - <div class="zee-scheme__dialog-button" v-if="['new', 'edit'].includes(dialogType)"> 164 + <div class="z-scheme__dialog-button" v-if="['new', 'edit'].includes(dialogType)">
165 <el-button :size="size" type="primary" @click="handleConfirm" :loading="submitting">确定</el-button> 165 <el-button :size="size" type="primary" @click="handleConfirm" :loading="submitting">确定</el-button>
166 <el-button :size="size" plain @click="closeDialog">取消</el-button> 166 <el-button :size="size" plain @click="closeDialog">取消</el-button>
167 </div> 167 </div>
packages/select/index.bak.vue
  Diff comments   View file @2c33474
1 <template> 1 <template>
2 <el-select 2 <el-select
3 - class="zee-select" 3 + class="z-select"
4 :disabled="disabled" 4 :disabled="disabled"
5 :value-key="valueKey" 5 :value-key="valueKey"
6 :filterable="filterable" 6 :filterable="filterable"
@@ -254,7 +254,7 @@ export default { @@ -254,7 +254,7 @@ export default {
254 </script> 254 </script>
255 255
256 <style lang="scss"> 256 <style lang="scss">
257 -.zee-select { 257 +.z-select {
258 .el-input__prefix { 258 .el-input__prefix {
259 height: 100%; 259 height: 100%;
260 display: flex; 260 display: flex;
packages/table/editable.vue
  Diff comments   View file @2c33474
  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 +
1 <template> 29 <template>
2 <el-table :data="tableData | tableDataFilter" :size="tableSize" v-bind="_props" @header-click="onHeaderClick" @cell-click="onCellClick" @cell-dblclick="onCellDblclick"> 30 <el-table :data="tableData | tableDataFilter" :size="tableSize" v-bind="_props" @header-click="onHeaderClick" @cell-click="onCellClick" @cell-dblclick="onCellDblclick">
3 <template v-for="(item, index) in columns"> 31 <template v-for="(item, index) in columns">
4 <el-table-column v-bind="item" :key="index"> 32 <el-table-column v-bind="item" :key="index">
  33 + <template #header>
  34 + <span>{{ item.label }}</span>
  35 + </template>
5 <template #default="{ row, column }"> 36 <template #default="{ row, column }">
6 <table-column-cell 37 <table-column-cell
7 - :editable="row.$editable || (tableEditCell.index === row.$index && tableEditCell.prop === item.prop)" 38 + :disabled="item.editable === false"
  39 + :editable="item.editable !== false && (row.$editable || (tableEditCell.index === row.$index && tableEditCell.prop === item.prop))"
8 :type="item.type" 40 :type="item.type"
9 :value="row[column.property]" 41 :value="row[column.property]"
10 @input="onCellInput" 42 @input="onCellInput"
11 - ></table-column-cell> 43 + @edit-click="onCellDblclick(row, column)"
  44 + @edit-confirm="onHeaderClick"
  45 + >
  46 + <template v-if="$scopedSlots[`column-editor-${item.prop}`]">
  47 + <slot :name="`column-editor-${item.prop}`" :value="row[column.property]" :onInput="onCellInput"></slot>
  48 + </template>
  49 + </table-column-cell>
12 </template> 50 </template>
13 </el-table-column> 51 </el-table-column>
14 </template> 52 </template>
@@ -29,28 +67,49 @@ export default { @@ -29,28 +67,49 @@ export default {
29 value: [String, Number, Array, Object], 67 value: [String, Number, Array, Object],
30 type: { type: String, default: 'el-input' }, 68 type: { type: String, default: 'el-input' },
31 editable: Boolean, 69 editable: Boolean,
  70 + disabled: Boolean,
  71 + showHandler: {
  72 + type: Boolean,
  73 + default: true,
  74 + },
32 }, 75 },
33 watch: { 76 watch: {
34 editable(val) { 77 editable(val) {
35 if (val && this.type === 'el-input') { 78 if (val && this.type === 'el-input') {
36 this.$nextTick(() => { 79 this.$nextTick(() => {
37 - this.$children[0].focus(); 80 + this.$children[0] && this.$children[0].focus && this.$children[0].focus();
38 }); 81 });
39 } 82 }
40 }, 83 },
41 }, 84 },
42 render(h) { 85 render(h) {
43 if (this.editable) { 86 if (this.editable) {
44 - return h(this.type, {  
45 - props: { value: this.value, size: 'mini' },  
46 - on: {  
47 - input: value => {  
48 - this.$emit('input', value); 87 + let editRender = [
  88 + h(this.type, {
  89 + props: { value: this.value, size: 'mini' },
  90 + on: {
  91 + input: value => {
  92 + this.$emit('input', value);
  93 + },
49 }, 94 },
50 - },  
51 - }); 95 + }),
  96 + ];
  97 + if (this.$scopedSlots.default) {
  98 + editRender = [this.$scopedSlots.default()];
  99 + }
  100 + if (this.showHandler !== false) {
  101 + const handlerItems = [h('i', { attrs: { title: '确定', class: 'el-icon-check' }, on: { click: () => this.$emit('edit-confirm') } })];
  102 + // handlerItems.push(h('i', { attrs: { title: '取消', class: 'el-icon-close' }, on: { click: () => this.$emit('edit-confirm') } }));
  103 + const handler = h('span', handlerItems);
  104 + editRender.push(handler);
  105 + }
  106 + return h('span', { class: 'z-table-column__cell-editable' }, editRender);
  107 + }
  108 + const defauleRender = [this.value];
  109 + if (!this.disabled && this.showHandler !== false) {
  110 + defauleRender.push(h('i', { attrs: { title: '编辑', class: 'el-icon-edit' }, on: { click: () => this.$emit('edit-click') } }));
52 } 111 }
53 - return h('span', this.value); 112 + return h('span', { class: 'z-table-column__cell-editable' }, defauleRender);
54 }, 113 },
55 }, 114 },
56 }, 115 },
@@ -69,6 +128,11 @@ export default { @@ -69,6 +128,11 @@ export default {
69 }, 128 },
70 ...tableProps, 129 ...tableProps,
71 }, 130 },
  131 + watch: {
  132 + value(val) {
  133 + this.tableData = val || [];
  134 + },
  135 + },
72 data() { 136 data() {
73 return { 137 return {
74 tableData: this.value, 138 tableData: this.value,
@@ -82,6 +146,9 @@ export default { @@ -82,6 +146,9 @@ export default {
82 return value.map((item, index) => ({ ...item, $index: index })); 146 return value.map((item, index) => ({ ...item, $index: index }));
83 }, 147 },
84 }, 148 },
  149 + // mounted() {
  150 + // console.log(this.$scopedSlots);
  151 + // },
85 methods: { 152 methods: {
86 onHeaderClick() { 153 onHeaderClick() {
87 this.tableEditCell = {}; 154 this.tableEditCell = {};