update

co-kevin · Mar 17, 2019 · 49b3064 · 49b3064
1 parent c0352bd
commit 49b3064
Show file tree

Hide file tree

Showing 40 changed files with 178 additions and 140 deletions.
diff --git a/README.md b/README.md
@@ -169,10 +169,10 @@ edit-render 渲染参数配置
 
 | name | 说明 |
 |------|------|
-| — | 自定义渲染显示内容，参数为 { row, column, $index, editRender } |
-| edit | 自定义渲染组件，参数为 { row, column, $index, editRender } |
-| header | 自定义表头的内容，参数为 { column, $index, editRender } |
-| valid | 自定义校验提示信息，参数为 { rule, row, column, $index, editRender } |
+| — | 自定义渲染显示内容，参数为 { row, column, $index, $render } |
+| edit | 自定义渲染组件，参数为 { row, column, $index, $render } |
+| header | 自定义表头的内容，参数为 { column, $index, $render } |
+| valid | 自定义校验提示信息，参数为 { rule, row, column, $index, $render } |
 
 ## Example
 

diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vue-element-extends/favicon.ico><title>ElementUI 2.X components extends.</title><link href=/vue-element-extends/static/css/chunk-vendors.23603044.css rel=preload as=style><link href=/vue-element-extends/static/css/index.4cbff357.css rel=preload as=style><link href=/vue-element-extends/static/js/chunk-vendors.1237dc96.js rel=preload as=script><link href=/vue-element-extends/static/js/index.724a19ee.js rel=preload as=script><link href=/vue-element-extends/static/css/chunk-vendors.23603044.css rel=stylesheet><link href=/vue-element-extends/static/css/index.4cbff357.css rel=stylesheet></head><body><noscript><strong>We're sorry but test2 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vue-element-extends/static/js/chunk-vendors.1237dc96.js></script><script src=/vue-element-extends/static/js/index.724a19ee.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vue-element-extends/favicon.ico><title>ElementUI 2.X components extends.</title><link href=/vue-element-extends/static/css/chunk-vendors.23603044.css rel=preload as=style><link href=/vue-element-extends/static/css/index.17db3546.css rel=preload as=style><link href=/vue-element-extends/static/js/chunk-vendors.1237dc96.js rel=preload as=script><link href=/vue-element-extends/static/js/index.6cdcce15.js rel=preload as=script><link href=/vue-element-extends/static/css/chunk-vendors.23603044.css rel=stylesheet><link href=/vue-element-extends/static/css/index.17db3546.css rel=stylesheet></head><body><noscript><strong>We're sorry but test2 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vue-element-extends/static/js/chunk-vendors.1237dc96.js></script><script src=/vue-element-extends/static/js/index.6cdcce15.js></script></body></html>
diff --git a/docs/static/css/index.4cbff357.css → docs/static/css/index.17db3546.css b/docs/static/css/index.4cbff357.css → docs/static/css/index.17db3546.css
diff --git a/docs/static/js/index.6cdcce15.js b/docs/static/js/index.6cdcce15.js
diff --git a/docs/static/js/index.724a19ee.js b/docs/static/js/index.724a19ee.js
diff --git a/examples/views/editable/Click1.vue b/examples/views/editable/Click1.vue
@@ -21,10 +21,13 @@
       <el-editable-column prop="updateTime" label="更新时间" width="160" :formatter="formatterDate"></el-editable-column>
       <el-editable-column prop="createTime" label="创建时间" width="160" :formatter="formatterDate"></el-editable-column>
       <el-editable-column label="操作" width="160">
-        <template slot-scope="scope">
+        <template v-slot="scope">
           <el-button size="small" type="danger" @click="removeEvent(scope.row)">删除</el-button>
         </template>
       </el-editable-column>
+      <template v-slot:append>
+        <div>-- append 插槽 --</div>
+      </template>
     </el-editable>
   </div>
 </template>

diff --git a/examples/views/editable/Click10.vue b/examples/views/editable/Click10.vue
@@ -41,7 +41,7 @@
         :index="indexMethod"
         width="55"></el-editable-column>
       <el-editable-column type="expand">
-        <template slot-scope="props">
+        <template v-slot="props">
           <el-form label-position="left" inline>
             <el-form-item label="名称">
               <span>{{ props.row.name }}</span>
@@ -64,7 +64,7 @@
         min-width="220"
         show-overflow-tooltip
         :edit-render="{type: 'default', autofocus: true}">
-        <template slot="edit" slot-scope="scope">
+        <template v-slot:edit="scope">
           <textarea class="editable-custom_input" v-model="scope.row.name" @input="$refs.editable.updateStatus(scope)"></textarea>
         </template>
       </el-editable-column>
@@ -116,7 +116,7 @@
         label="是否启用2"
         width="200"
         :edit-render="{type: 'visible'}">
-        <template slot="edit" slot-scope="scope">
+        <template v-slot:edit="scope">
           <el-radio-group v-model="scope.row.flag2" size="mini" @change="$refs.editable.updateStatus(scope)">
             <el-radio label="N" border>值1</el-radio>
             <el-radio label="Y" border>值2</el-radio>
@@ -128,7 +128,7 @@
         label="状态"
         width="160"
         :edit-render="{type: 'visible'}">
-        <template slot="edit" slot-scope="scope">
+        <template v-slot:edit="scope">
           <el-checkbox-group v-model="scope.row.status" size="mini" @change="$refs.editable.updateStatus(scope)">
             <el-checkbox-button label="success">成功</el-checkbox-button>
             <el-checkbox-button label="error">失败</el-checkbox-button>
@@ -141,7 +141,7 @@
         width="140"
         :formatter="formatterOrder"
         :edit-render="{type: 'default'}">
-        <template slot="edit" slot-scope="scope">
+        <template v-slot:edit="scope">
           <el-autocomplete v-model="scope.row.order" :fetch-suggestions="querySearchAsync" placeholder="选中订单" @select="$refs.editable.updateStatus(scope)"></el-autocomplete>
         </template>
       </el-editable-column>
@@ -153,7 +153,7 @@
       <el-editable-column
         label="操作"
         width="160">
-        <template slot-scope="scope">
+        <template v-slot="scope">
           <template v-if="$refs.editable.hasActiveRow(scope.row)">
             <el-button size="mini" type="success" @click="saveRowEvent(scope.row)">保存</el-button>
             <el-button size="mini" type="warning" @click="cancelRowEvent(scope.row)">取消</el-button>

diff --git a/examples/views/editable/Click11.vue b/examples/views/editable/Click11.vue
@@ -43,7 +43,7 @@
         :index="indexMethod"
         width="55"></el-editable-column>
       <el-editable-column type="expand">
-        <template slot-scope="props">
+        <template v-slot="props">
           <el-form label-position="left" inline>
             <el-form-item label="名称">
               <span>{{ props.row.name }}</span>
@@ -66,7 +66,7 @@
         min-width="220"
         show-overflow-tooltip
         :edit-render="{type: 'default', autofocus: true}">
-        <template slot="edit" slot-scope="scope">
+        <template v-slot:edit="scope">
           <textarea class="editable-custom_input" v-model="scope.row.name" @input="$refs.editable.updateStatus(scope)"></textarea>
         </template>
       </el-editable-column>
@@ -100,7 +100,7 @@
         label="attr4 唯一下拉选项"
         width="200"
         :edit-render="{type: 'default'}">
-        <template slot="edit" slot-scope="scope">
+        <template v-slot:edit="scope">
           <el-select v-model="scope.row.attr4" @change="attr4ChangeEvent(scope)">
             <el-option
               v-for="(item, index) in attr4Options"
@@ -110,14 +110,14 @@
               :disabled="item.disabled"></el-option>
           </el-select>
         </template>
-        <template slot-scope="scope">{{ getSelectLabel(scope.row.attr4, 'value', 'label', attr4Options) }}</template>
+        <template v-slot="scope">{{ getSelectLabel(scope.row.attr4, 'value', 'label', attr4Options) }}</template>
       </el-editable-column>
       <el-editable-column
         prop="attr5"
         label="attr5 限制唯一下拉"
         width="200"
         :edit-render="{type: 'default'}">
-        <template slot="edit" slot-scope="scope">
+        <template v-slot:edit="scope">
           <el-select v-model="scope.row.attr5" @change="attr5ChangeEvent(scope)">
             <el-option
               v-for="(item, index) in attr5Options"
@@ -128,7 +128,7 @@
         </template>
       </el-editable-column>
       <el-editable-column label="操作" width="80">
-        <template slot-scope="scope">
+        <template v-slot="scope">
           <el-button size="mini" type="danger" @click="removeEvent(scope)">删除</el-button>
         </template>
       </el-editable-column>

diff --git a/examples/views/editable/Click12.vue b/examples/views/editable/Click12.vue
@@ -54,7 +54,7 @@
         label="方式1"
         width="160"
         :edit-render="{type: 'default'}">
-        <template slot="edit" slot-scope="scope">
+        <template v-slot:edit="scope">
           <el-select v-model="scope.row.userInfo.sex1" placeholder="请选择性别" clearable @change="$refs.editable.updateStatus(scope)">
             <el-option
               v-for="(item, index) in sexList"
@@ -63,15 +63,15 @@
               :label="item.spell"></el-option>
           </el-select>
         </template>
-        <template slot-scope="scope">{{ getSelectLabel(scope.row.userInfo.sex1, 'val', 'spell', sexList) }}</template>
+        <template v-slot="scope">{{ getSelectLabel(scope.row.userInfo.sex1, 'val', 'spell', sexList) }}</template>
       </el-editable-column>
       <el-editable-column
         prop="userInfo.base.other.sex2"
         label="方式2"
         width="160"
         :edit-render="{name: 'ElSelect', options: sexList, optionProps: {value: 'value', label: 'spell'}, attrs: {clearable: true, placeholder: '请选择性别'}}">
-        <template slot="edit" slot-scope="scope">
-          <el-select v-model="scope.row.userInfo.base.other.sex2" v-bind="scope.editRender.attrs" @change="$refs.editable.updateStatus(scope)">
+        <template v-slot:edit="scope">
+          <el-select v-model="scope.row.userInfo.base.other.sex2" v-bind="scope.$render.attrs" @change="$refs.editable.updateStatus(scope)">
             <el-option
               v-for="(item, index) in sexList"
               :key="index"
@@ -85,10 +85,10 @@
         label="年龄"
         width="160"
         :edit-render="{name: 'ElInputNumber', attrs: {min: 1, max: 200}}">
-        <template slot="edit" slot-scope="scope">
+        <template v-slot:edit="scope">
           <el-input-number
             v-model="scope.row.userInfo.base.age"
-            v-bind="scope.editRender.attrs"
+            v-bind="scope.$render.attrs"
             @input="$refs.editable.updateStatus(scope)"></el-input-number>
         </template>
       </el-editable-column>
@@ -97,10 +97,10 @@
         label="地区"
         min-width="180"
         :edit-render="{name: 'ElCascader', attrs: {options: regionList, separator: '-'}}">
-        <template slot="edit" slot-scope="scope">
+        <template v-slot:edit="scope">
           <el-cascader
             v-model="scope.row.userInfo.region"
-            v-bind="scope.editRender.attrs"
+            v-bind="scope.$render.attrs"
             @change="$refs.editable.updateStatus(scope)"></el-cascader>
         </template>
       </el-editable-column>
@@ -110,10 +110,10 @@
         width="220"
         sortable
         :edit-render="{name: 'ElDatePicker', attrs: {type: 'datetime', format: 'yyyy-MM-dd hh:mm:ss'}}">
-        <template slot="edit" slot-scope="scope">
+        <template v-slot:edit="scope">
           <el-date-picker
             v-model="scope.row.dateObj.date1"
-            v-bind="scope.editRender.attrs"
+            v-bind="scope.$render.attrs"
             @change="$refs.editable.updateStatus(scope)"></el-date-picker>
         </template>
       </el-editable-column>
@@ -123,7 +123,7 @@
         width="200"
         :edit-render="{name: 'ElSlider', type: 'visible'}"></el-editable-column>
       <el-editable-column label="操作" width="180">
-        <template slot-scope="scope">
+        <template v-slot="scope">
           <el-button size="mini" type="danger" @click="removeEvent(scope)">删除</el-button>
           <el-button size="mini" type="warning" @click="revertEvent(scope.row)">默认值</el-button>
         </template>

diff --git a/examples/views/editable/Click2.vue b/examples/views/editable/Click2.vue
@@ -56,7 +56,7 @@
         </template>
       </el-editable-column>
       <el-editable-column label="操作" width="100">
-        <template slot-scope="scope">
+        <template v-slot="scope">
           <el-button size="mini" type="danger" @click="removeEvent(scope.row)">删除</el-button>
         </template>
       </el-editable-column>

diff --git a/examples/views/editable/Click3.vue b/examples/views/editable/Click3.vue
@@ -23,46 +23,46 @@
       <el-editable-column type="selection" width="55" :selectable="selectableEvent"></el-editable-column>
       <el-editable-column prop="id" label="ID" width="80"></el-editable-column>
       <el-editable-column prop="name" label="名字" show-overflow-tooltip :edit-render="{type: 'default'}">
-        <template slot="edit" slot-scope="scope">
+        <template v-slot:edit="scope">
           <el-input v-model="scope.row.name" size="mini" @input="$refs.editable.updateStatus(scope)"></el-input>
         </template>
-        <template slot-scope="scope">{{ scope.row.name }}</template>
+        <template v-slot="scope">{{ scope.row.name }}</template>
       </el-editable-column>
       <el-editable-column prop="sex" label="性别" :edit-render="{type: 'default'}">
-        <template slot="edit" slot-scope="scope">
+        <template v-slot:edit="scope">
           <el-select v-model="scope.row.sex" size="mini" clearable @change="$refs.editable.updateStatus(scope)">
             <el-option v-for="item in sexList" :key="item.value" :value="item.value" :label="item.label"></el-option>
           </el-select>
         </template>
-        <template slot-scope="scope">{{ getSelectLabel(scope.row.sex, 'value', 'label', sexList) }}</template>
+        <template v-slot="scope">{{ getSelectLabel(scope.row.sex, 'value', 'label', sexList) }}</template>
       </el-editable-column>
       <el-editable-column prop="age" label="年龄" :edit-render="{type: 'default'}">
-        <template slot="edit" slot-scope="scope">
+        <template v-slot:edit="scope">
           <el-input-number v-model="scope.row.age" size="mini" :min="1" :max="200" @input="$refs.editable.updateStatus(scope)"></el-input-number>
         </template>
-        <template slot-scope="scope">{{ scope.row.age }}</template>
+        <template v-slot="scope">{{ scope.row.age }}</template>
       </el-editable-column>
       <el-editable-column prop="region" label="地区" width="200" :edit-render="{type: 'default'}">
-        <template slot="edit" slot-scope="scope">
+        <template v-slot:edit="scope">
           <el-cascader v-model="scope.row.region" size="mini" clearable :options="regionList" @change="$refs.editable.updateStatus(scope)"></el-cascader>
         </template>
-        <template slot-scope="scope">{{ getCascaderLabel(scope.row.region, regionList) }}</template>
+        <template v-slot="scope">{{ getCascaderLabel(scope.row.region, regionList) }}</template>
       </el-editable-column>
       <el-editable-column prop="date" label="日期" :edit-render="{type: 'default'}">
-        <template slot="edit" slot-scope="scope">
+        <template v-slot:edit="scope">
           <el-date-picker v-model="scope.row.date" type="datetime" format="yyyy/MM/dd" size="mini" @change="$refs.editable.updateStatus(scope)"></el-date-picker>
         </template>
-        <template slot-scope="scope">{{ getDatePicker(scope.row.date) }}</template>
+        <template v-slot="scope">{{ getDatePicker(scope.row.date) }}</template>
       </el-editable-column>
       <el-editable-column prop="flag" label="是否启用" :edit-render="{type: 'visible'}">
-        <template slot="edit" slot-scope="scope">
+        <template v-slot:edit="scope">
           <el-switch v-model="scope.row.flag" size="mini" @change="$refs.editable.updateStatus(scope)"></el-switch>
         </template>
       </el-editable-column>
       <el-editable-column prop="updateTime" label="更新时间" width="160" :formatter="formatterDate"></el-editable-column>
       <el-editable-column prop="createTime" label="创建时间" width="160" :formatter="formatterDate"></el-editable-column>
       <el-editable-column label="操作" width="160">
-        <template slot-scope="scope">
+        <template v-slot="scope">
           <el-button size="mini" type="danger" @click="removeEvent(scope.row)">删除</el-button>
           <el-button size="mini" type="info" @click="revertEvent(scope.row)">还原</el-button>
         </template>

diff --git a/examples/views/editable/Click4.vue b/examples/views/editable/Click4.vue
@@ -37,7 +37,7 @@
       <el-editable-column prop="createTime" label="创建时间" width="160" :formatter="formatterDate"></el-editable-column>
       <el-editable-column prop="describe3" label="备注" width="200" fixed="right" show-overflow-tooltip :edit-render="{name: 'ElInput'}"></el-editable-column>
       <el-editable-column label="操作" width="160" fixed="right">
-        <template slot-scope="scope">
+        <template v-slot="scope">
           <el-button size="mini" type="danger" @click="removeEvent(scope.row)">删除</el-button>
           <el-button size="mini" type="info" @click="revertEvent(scope.row)">还原</el-button>
         </template>

diff --git a/examples/views/editable/Click5.vue b/examples/views/editable/Click5.vue
@@ -45,7 +45,7 @@
       <el-editable-column prop="createTime" label="创建时间" width="160" :formatter="formatterDate"></el-editable-column>
       <el-editable-column prop="describe3" label="备注" width="200" show-overflow-tooltip :edit-render="{name: 'ElInput'}"></el-editable-column>
       <el-editable-column label="操作" width="160" fixed="right">
-        <template slot-scope="scope">
+        <template v-slot="scope">
           <el-button size="mini" type="danger" @click="removeEvent(scope.row)">删除</el-button>
           <el-button size="mini" type="info" @click="revertEvent(scope.row)">还原</el-button>
         </template>

diff --git a/examples/views/editable/Click6.vue b/examples/views/editable/Click6.vue
@@ -23,15 +23,15 @@
       height="540"
       style="width: 100%">
       <el-editable-column type="index" width="55">
-        <template slot="header">
+        <template v-slot:header>
           <i class="el-icon-setting" @click="dialogVisible = true"></i>
         </template>
       </el-editable-column>
       <template v-for="(item, index) in columnConfigs">
         <el-editable-column v-if="item.customShow" :key="index" v-bind="item"></el-editable-column>
       </template>
       <el-editable-column label="操作">
-        <template slot-scope="scope">
+        <template v-slot="scope">
           <el-popover placement="top" width="160" v-model="scope.row.flag3">
             <p>确定删除吗？</p>
             <div style="text-align: right; margin: 0">

diff --git a/examples/views/editable/Click7.vue b/examples/views/editable/Click7.vue
@@ -27,15 +27,15 @@
       :span-method="objectSpanMethod"
       style="width: 100%">
       <el-editable-column type="index" width="55">
-        <template slot="header">
+        <template v-slot:header>
           <i class="el-icon-setting" @click="dialogVisible = true"></i>
         </template>
       </el-editable-column>
       <template v-for="(item, index) in columnConfigs">
         <el-editable-column v-if="item.customShow" :key="index" v-bind="item"></el-editable-column>
       </template>
       <el-editable-column label="操作">
-        <template slot-scope="scope">
+        <template v-slot="scope">
           <el-popover placement="top" width="160" v-model="scope.row.flag3">
             <p>确定删除吗？</p>
             <div style="text-align: right; margin: 0">

diff --git a/examples/views/editable/Click8.vue b/examples/views/editable/Click8.vue
@@ -27,15 +27,15 @@
       @clear-active="clearActiveEvent"
       style="width: 100%">
       <el-editable-column type="index" width="55">
-        <template slot="header">
+        <template v-slot:header>
           <i class="el-icon-setting" @click="dialogVisible = true"></i>
         </template>
       </el-editable-column>
       <template v-for="(item, index) in columnConfigs">
         <el-editable-column v-if="item.customShow" :key="index" v-bind="item"></el-editable-column>
       </template>
       <el-editable-column label="操作">
-        <template slot-scope="scope">
+        <template v-slot="scope">
           <el-popover placement="top" width="160" v-model="scope.row.flag3">
             <p>确定删除吗？</p>
             <div style="text-align: right; margin: 0">