perf: 优化demo代码格式,新增滚动导航条

BoBoooooo · Jan 29, 2021 · 9f612e1 · 9f612e1
1 parent 589e1e8
commit 9f612e1
Show file tree

Hide file tree

Showing 6 changed files with 458 additions and 419 deletions.
diff --git a/src/demo/App.vue b/src/demo/App.vue
diff --git a/src/demo/component/ChartScreen.vue b/src/demo/component/ChartScreen.vue
@@ -6,9 +6,7 @@
 -->
 
 <template>
-  <div class="page-container">
-    <GenerateForm :data="data" :value="value"></GenerateForm>
-  </div>
+  <GenerateForm :data="data"></GenerateForm>
 </template>
 
 <script>
@@ -20,23 +18,5 @@ import data from './data';
 })
 export default class ChartScreen extends Vue {
   data = data
-
-  value = {
-    chart2: {
-      xAxis: {
-        type: 'category',
-        data: ['1', '2', '3', '4', '5', '6', '7'],
-      },
-      yAxis: {
-        type: 'value',
-      },
-      series: [
-        {
-          data: [150, 230, 224, 218, 135, 147, 260],
-          type: 'line',
-        },
-      ],
-    },
-  }
 }
 </script>
diff --git a/src/demo/component/PersonCrudTable.vue b/src/demo/component/PersonCrudTable.vue
@@ -6,25 +6,29 @@
 -->
 
 <template>
-  <div class="page-container">
-    <CrudTable ref="table" tableName="person" tableTitle="员工管理" fullHeight orderCondition="timestamp desc" :visibleList="visibleList" v-bind="$attrs" v-on="$listeners">
-      <template #columnFormatter="{row,prop}">
-        <el-tag v-if="prop === 'jobno'">{{ row.jobno }}</el-tag>
-        <span v-if="prop === 'personname'"><i class="el-icon el-icon-user" style="color: red"></i>{{ row.personname }}</span>
-      </template>
-    </CrudTable>
-  </div>
+  <CrudTable ref="table" tableName="person" tableTitle="员工管理" fullHeight orderCondition="timestamp desc" :visibleList="visibleList" v-bind="$attrs" v-on="$listeners">
+    <template #columnFormatter="{row,prop}">
+      <el-tag v-if="prop === 'jobno'">{{ row.jobno }}</el-tag>
+      <span v-if="prop === 'personname'"><i class="el-icon el-icon-user" style="color: red"></i>{{ row.personname }}</span>
+    </template>
+    <template #btnCustom="{row}">
+      <el-button size="mini" @click="getRowData(row)">自定义</el-button>
+    </template>
+  </CrudTable>
 </template>
 
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
 
-
 @Component({
   name: 'PersonTable',
 })
 export default class PersonTable extends Vue {
   @Prop(Object)
-  visibleList;
+  visibleList
+
+  getRowData(row) {
+    this.$alert(JSON.stringify(row));
+  }
 }
 </script>
diff --git a/src/demo/component/PersonProTable.vue b/src/demo/component/PersonProTable.vue
@@ -6,14 +6,12 @@
 -->
 
 <template>
-  <div class="page-container">
-    <ProTable ref="table" :request="request" :columns="columns" tableTitle="员工管理" fullHeight orderCondition="timestamp desc"  v-bind="$attrs" v-on="$listeners">
-      <template #columnFormatter="{row,prop}">
-        <el-tag v-if="prop === 'jobno'">{{ row.jobno }}</el-tag>
-        <span v-if="prop === 'personname'"><i class="el-icon el-icon-user" style="color: red"></i>{{ row.personname }}</span>
-      </template>
-    </ProTable>
-  </div>
+  <ProTable ref="table" :request="request" :columns="columns" tableTitle="员工管理" fullHeight orderCondition="timestamp desc" v-bind="$attrs" v-on="$listeners">
+    <template #columnFormatter="{row,prop}">
+      <el-tag v-if="prop === 'jobno'">{{ row.jobno }}</el-tag>
+      <span v-if="prop === 'personname'"><i class="el-icon el-icon-user" style="color: red"></i>{{ row.personname }}</span>
+    </template>
+  </ProTable>
 </template>
 
 <script lang="ts">
@@ -24,88 +22,96 @@ import { Vue, Component, Prop } from 'vue-property-decorator';
   name: 'PersonProTable',
 })
 export default class PersonProTable extends Vue {
-   columns = {
-     name: 'person',
-     position: '人员信息列表',
-     columns: [{
-       prop: 'jobno',
-       label: '工号',
-       minWidth: 140,
-       align: 'center',
-       headerAlign: 'center',
-       showOverflowTooltip: true,
-       sortable: 'custom',
-       slotName: '',
-       searchable: true,
-     }, {
-       prop: 'personname',
-       label: '姓名',
-       minWidth: 140,
-       align: 'center',
-       headerAlign: 'center',
-       showOverflowTooltip: true,
-       sortable: 'custom',
-       slotName: '',
-       searchable: true,
-     }, {
-       prop: 'jobtime',
-       label: '入职时间',
-       minWidth: 140,
-       align: 'center',
-       headerAlign: 'center',
-       showOverflowTooltip: true,
-       sortable: 'custom',
-       slotName: '',
-       searchable: true,
-     }, {
-       prop: 'deptname',
-       label: '所在部门',
-       minWidth: 140,
-       align: 'center',
-       headerAlign: 'center',
-       showOverflowTooltip: true,
-       sortable: 'custom',
-       slotName: '',
-       searchable: true,
-     }, {
-       prop: 'post',
-       label: '岗位',
-       minWidth: 140,
-       align: 'center',
-       headerAlign: 'center',
-       showOverflowTooltip: true,
-       sortable: 'custom',
-       slotName: '',
-       searchable: true,
-     }, {
-       prop: 'level',
-       label: '职级',
-       minWidth: 140,
-       align: 'center',
-       headerAlign: 'center',
-       showOverflowTooltip: true,
-       sortable: 'custom',
-       slotName: '',
-       searchable: true,
-     }, {
-       prop: 'mobile',
-       label: '联系方式',
-       minWidth: 140,
-       align: 'center',
-       headerAlign: 'center',
-       showOverflowTooltip: true,
-       sortable: 'custom',
-       slotName: '',
-       searchable: true,
-     }],
-   }
+  columns = {
+    name: 'person',
+    position: '人员信息列表',
+    columns: [
+      {
+        prop: 'jobno',
+        label: '工号',
+        minWidth: 140,
+        align: 'center',
+        headerAlign: 'center',
+        showOverflowTooltip: true,
+        sortable: 'custom',
+        slotName: '',
+        searchable: true,
+      },
+      {
+        prop: 'personname',
+        label: '姓名',
+        minWidth: 140,
+        align: 'center',
+        headerAlign: 'center',
+        showOverflowTooltip: true,
+        sortable: 'custom',
+        slotName: '',
+        searchable: true,
+      },
+      {
+        prop: 'jobtime',
+        label: '入职时间',
+        minWidth: 140,
+        align: 'center',
+        headerAlign: 'center',
+        showOverflowTooltip: true,
+        sortable: 'custom',
+        slotName: '',
+        searchable: true,
+      },
+      {
+        prop: 'deptname',
+        label: '所在部门',
+        minWidth: 140,
+        align: 'center',
+        headerAlign: 'center',
+        showOverflowTooltip: true,
+        sortable: 'custom',
+        slotName: '',
+        searchable: true,
+      },
+      {
+        prop: 'post',
+        label: '岗位',
+        minWidth: 140,
+        align: 'center',
+        headerAlign: 'center',
+        showOverflowTooltip: true,
+        sortable: 'custom',
+        slotName: '',
+        searchable: true,
+      },
+      {
+        prop: 'level',
+        label: '职级',
+        minWidth: 140,
+        align: 'center',
+        headerAlign: 'center',
+        showOverflowTooltip: true,
+        sortable: 'custom',
+        slotName: '',
+        searchable: true,
+      },
+      {
+        prop: 'mobile',
+        label: '联系方式',
+        minWidth: 140,
+        align: 'center',
+        headerAlign: 'center',
+        showOverflowTooltip: true,
+        sortable: 'custom',
+        slotName: '',
+        searchable: true,
+      },
+    ],
+  }
 
-   async request(axiosParams: Params) : Promise<DataSource> {
-     const res = await this.$PROCRUD.crud(DML.SELECT, 'person', axiosParams);
-     return {
-       data: res.data.list,
-       total: res.data.total,
-     };
-   }
+  async request(axiosParams: Params): Promise<DataSource> {
+    const res = await this.$PROCRUD.crud(DML.SELECT, 'person', axiosParams);
+    return {
+      data: res.data.list,
+      total: res.data.total,
+    };
+  }
 }
 </script>