完善示例

Author: huangshuwei

examples/src/comp/locale/index.js

@@ -34,6 +34,21 @@ export default {
             openInCodeSandBox: "在 CodeSandBox 中编辑",
         },
         completeDemo: {
+            dataRowsOption: [
+                {
+                    value: "1000",
+                    label: "1000 行",
+                },
+                {
+                    value: "10000",
+                    label: "10,000 行",
+                },
+                {
+                    value: "100000",
+                    label: "100,000 行",
+                },
+            ],
+            dataRows: "数据量：",
             theme: "暗黑主题：",
             columnFixed: "列固定：",
             loading: "Loading：",
@@ -73,6 +88,21 @@ export default {
             openInCodeSandBox: "Edit in CodeSandBox",
         },
         completeDemo: {
+            dataRowsOption: [
+                {
+                    value: "1000",
+                    label: "1000 Rows",
+                },
+                {
+                    value: "10000",
+                    label: "10,000 Rows",
+                },
+                {
+                    value: "100000",
+                    label: "100,000 Rows",
+                },
+            ],
+            dataRows: "Data Rows:",
             theme: "Dark Theme:",
             columnFixed: "Fixed Columns:",
             loading: "Loading:",

examples/src/demo/index.vue

@@ -4,20 +4,36 @@
             <div class="operation">
                 <div class="operation-item">
                     <el-row :gutter="20">
+                        <el-col :span="4">
+                            {{ currentLocal["dataRows"] }}
+                            <el-select
+                                v-model="dataRow"
+                                style="width: 60%"
+                                size="small"
+                                @change="dataRowChange"
+                            >
+                                <el-option
+                                    v-for="item in currentLocal[
+                                        'dataRowsOption'
+                                    ]"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value"
+                                ></el-option>
+                            </el-select>
+                        </el-col>
                         <el-col :span="3">
-                            {{ currentLocal["theme"] }}
+                            {{ currentLocal["columnFixed"] }}
                             <el-switch
-                                v-model="enableDarkTheme"
+                                v-model="enableColumnFixed"
                                 :active-color="switchActiveColor"
                                 :inactive-color="switchInactiveColor"
-                                @change="switchTheme"
                             ></el-switch>
                         </el-col>
-
                         <el-col :span="3">
-                            {{ currentLocal["columnFixed"] }}
+                            {{ currentLocal["expand"] }}
                             <el-switch
-                                v-model="enableColumnFixed"
+                                v-model="enableExpand"
                                 :active-color="switchActiveColor"
                                 :inactive-color="switchInactiveColor"
                             ></el-switch>
@@ -32,31 +48,31 @@
                             ></el-switch>
                         </el-col>
                         <el-col :span="3">
-                            {{ currentLocal["expand"] }}
+                            {{ currentLocal["radio"] }}
                             <el-switch
-                                v-model="enableExpand"
+                                v-model="enableRowRadio"
                                 :active-color="switchActiveColor"
                                 :inactive-color="switchInactiveColor"
                             ></el-switch>
                         </el-col>
                         <el-col :span="3">
-                            {{ currentLocal["radio"] }}
+                            {{ currentLocal["checkbox"] }}
                             <el-switch
-                                v-model="enableRowRadio"
+                                v-model="enableRowCheckbox"
                                 :active-color="switchActiveColor"
                                 :inactive-color="switchInactiveColor"
                             ></el-switch>
                         </el-col>
                         <el-col :span="3">
-                            {{ currentLocal["checkbox"] }}
+                            {{ currentLocal["theme"] }}
                             <el-switch
-                                v-model="enableRowCheckbox"
+                                v-model="enableDarkTheme"
                                 :active-color="switchActiveColor"
                                 :inactive-color="switchInactiveColor"
+                                @change="switchTheme"
                             ></el-switch>
                         </el-col>
-                        <el-col :span="3"></el-col>
-                        <el-col :span="3"></el-col>
+                        <el-col :span="2"></el-col>
                     </el-row>
                 </div>
                 <!--   <div class="operation-item">
@@ -108,6 +124,7 @@ export default {
     mixins: [I18nMixins, ThemeSwitchMixins],
     data() {
         return {
+            dataRow: 1000,
             switchActiveColor: "#1890ff",
             switchInactiveColor: "rgba(0,0,0,.25)",
 
@@ -515,6 +532,15 @@ export default {
             this.filter();
         },
 
+        // data row change
+        dataRowChange() {
+            setTimeout(() => {
+                this.initSourceData();
+                // scroll to top
+                this.$refs["tableRef"].scrollTo({ top: 0 });
+            });
+        },
+
         initSourceData() {
             const PROFESSIONS = [
                 "Project Manager",
@@ -526,7 +552,9 @@ export default {
             ];
 
             let data = [];
-            for (let i = 0; i < 10000; i++) {
+
+            const dataRow = this.dataRow;
+            for (let i = 0; i < dataRow; i++) {
                 data.push({
                     rowKey: i,
                     rowIndex: i + 1,
@@ -567,10 +595,11 @@ export default {
     padding: 10px;
 
     .operation {
-        margin: 30px 0;
+        margin: 10px 0;
 
         .operation-item {
             height: 50px;
+            line-height: 50px;
         }
     }
 

examples/src/main.js

@@ -24,12 +24,22 @@ Vue.component("demo-block", DemoBlock);
 Vue.component("anchor", Anchor);
 
 // 仅用作示例
-import { Switch, Row, Col, RadioButton, RadioGroup } from "element-ui";
+import {
+    Switch,
+    Row,
+    Col,
+    RadioButton,
+    RadioGroup,
+    Select,
+    Option,
+} from "element-ui";
 Vue.use(Switch);
 Vue.use(Row);
 Vue.use(Col);
 Vue.use(RadioButton);
 Vue.use(RadioGroup);
+Vue.use(Select);
+Vue.use(Option);
 
 // vue-lazy-container
 import VueLazyContainer from "vue-lazy-container";