Feat: 增加 el-table-sticky 使用案例

Lruihao · Oct 12, 2023 · 4a67e9b · 4a67e9b
1 parent 62d8a04
commit 4a67e9b
Show file tree

Hide file tree

Showing 7 changed files with 329 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "serve": "npm run gr && vue-cli-service serve"
   },
   "dependencies": {
+    "@cell-x/el-table-sticky": "^1.0.2",
     "core-js": "^3.8.3",
     "driver.js": "^1.2.1",
     "element-ui": "^2.15.13",

diff --git a/src/main.js b/src/main.js
@@ -5,6 +5,7 @@ import '@/assets/css/index.scss'
 import App from './App.vue'
 import router from '@/router'
 import SvgIcon from '@/components/SvgIcon'
+import elTableSticky from '@cell-x/el-table-sticky'
 
 // register svg component globally
 Vue.component('SvgIcon', SvgIcon)
@@ -17,6 +18,7 @@ Vue.use(ElementUI)
 Vue.config.productionTip = false
 Vue.prototype.$fullRouter = router
 Vue.prototype.$homeRoute = router.options.routes.find(route => route.name === 'home')
+Vue.use(elTableSticky)
 
 new Vue({
   router,

diff --git a/src/router.js b/src/router.js
@@ -29,6 +29,24 @@ const routes = [
     meta: { description: 'icon 使用范例' },
     component: () => import(/* webpackChunkName: "icons" */ '@/views/icons.vue'),
   },
+  {
+    path: '/sticky-fixed-col',
+    name: 'stickyFixedCol',
+    meta: { description: '[sticky-header] 固定列表格' },
+    component: () => import(/* webpackChunkName: "stickyFixedCol" */ '@/views/sticky-fixed-col.vue'),
+  },
+  {
+    path: '/sticky-scroller',
+    name: 'stickyScroller',
+    meta: { description: '[sticky-scroller] 固定横向滚动条' },
+    component: () => import(/* webpackChunkName: "stickyScroller" */ '@/views/sticky-scroller.vue'),
+  },
+  {
+    path: '/sticky-sum',
+    name: 'stickySum',
+    meta: { description: '[sticky-footer] 表尾合计行' },
+    component: () => import(/* webpackChunkName: "stickySum" */ '@/views/sticky-sum.vue'),
+  },
 ]
 
 const router = new VueRouter({

diff --git a/src/views/sticky-fixed-col.vue b/src/views/sticky-fixed-col.vue
@@ -0,0 +1,103 @@
+<!-- [sticky-header] 固定列表格 -->
+<template>
+  <div>
+    <div class="page-header">
+      <el-button type="primary" @click="showName = !showName">
+        {{ showName ? '隐藏姓名' : '显示姓名' }}
+      </el-button>
+    </div>
+    <el-table
+      v-sticky-header="{ offsetTop: 'calc(40px + 1rem)' }"
+      stripe
+      border
+      :data="tableData"
+      style="width: 100%"
+    >
+      <el-table-column
+        fixed
+        prop="date"
+        label="日期"
+        width="150"
+      />
+      <el-table-column
+        v-if="showName"
+        fixed
+        prop="name"
+        label="姓名"
+        width="120"
+      />
+      <el-table-column
+        prop="province"
+        label="省份"
+        width="120"
+      />
+      <el-table-column
+        prop="city"
+        label="市区"
+        width="120"
+      />
+      <el-table-column
+        prop="address"
+        label="地址"
+        min-width="1000"
+      />
+      <el-table-column
+        prop="zip"
+        label="邮编"
+        width="120"
+      />
+      <el-table-column
+        fixed="right"
+        label="操作"
+        width="100"
+      >
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="handleClick(scope.row)">
+            查看
+          </el-button>
+          <el-button type="text" size="small">
+            编辑
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TableFixedColView',
+  data() {
+    return {
+      showName: true,
+      tableData: [],
+    }
+  },
+  mounted() {
+    for (let i = 0; i < 100; i++) {
+      this.tableData.push({
+        date: '2016-05-01',
+        name: '王小虎',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      })
+    }
+  },
+  methods: {
+    handleClick(row) {
+      console.log(row)
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.page-header {
+  background-color: #fff;
+  position: sticky;
+  top: 0;
+  z-index: 4;
+  padding-block: 0.5rem;
+  box-shadow: 1rem 0 0 rgba(255, 255, 255, 1);
+}
+</style>
diff --git a/src/views/sticky-scroller.vue b/src/views/sticky-scroller.vue
@@ -0,0 +1,103 @@
+<!-- [sticky-scroller] 固定横向滚动条 -->
+<template>
+  <div>
+    <div class="page-header">
+      <el-button type="primary" @click="showName = !showName">
+        {{ showName ? '隐藏姓名' : '显示姓名' }}
+      </el-button>
+    </div>
+    <el-table
+      v-sticky-scroller
+      stripe
+      border
+      :data="tableData"
+      style="width: 100%"
+    >
+      <el-table-column
+        fixed
+        prop="date"
+        label="日期"
+        width="150"
+      />
+      <el-table-column
+        v-if="showName"
+        fixed
+        prop="name"
+        label="姓名"
+        width="120"
+      />
+      <el-table-column
+        prop="province"
+        label="省份"
+        width="120"
+      />
+      <el-table-column
+        prop="city"
+        label="市区"
+        width="120"
+      />
+      <el-table-column
+        prop="address"
+        label="地址"
+        min-width="1000"
+      />
+      <el-table-column
+        prop="zip"
+        label="邮编"
+        width="120"
+      />
+      <el-table-column
+        fixed="right"
+        label="操作"
+        width="100"
+      >
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="handleClick(scope.row)">
+            查看
+          </el-button>
+          <el-button type="text" size="small">
+            编辑
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TableFixedColView',
+  data() {
+    return {
+      showName: true,
+      tableData: [],
+    }
+  },
+  mounted() {
+    for (let i = 0; i < 100; i++) {
+      this.tableData.push({
+        date: '2016-05-01',
+        name: '王小虎',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      })
+    }
+  },
+  methods: {
+    handleClick(row) {
+      console.log(row)
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.page-header {
+  background-color: #fff;
+  position: sticky;
+  top: 0;
+  z-index: 4;
+  padding-block: 0.5rem;
+  box-shadow: 1rem 0 0 rgba(255, 255, 255, 1);
+}
+</style>
diff --git a/src/views/sticky-sum.vue b/src/views/sticky-sum.vue
@@ -0,0 +1,88 @@
+<!-- [sticky-footer] 表尾合计行 -->
+<template>
+  <div>
+    <el-table
+      v-sticky-header
+      v-sticky-footer
+      :data="tableData"
+      border
+      :summary-method="getSummaries"
+      show-summary
+    >
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180"
+      />
+      <el-table-column
+        prop="name"
+        label="姓名"
+        width="500"
+      />
+      <el-table-column
+        prop="amount1"
+        label="数值 1（元）"
+        width="300"
+      />
+      <el-table-column
+        prop="amount2"
+        label="数值 2（元）"
+        width="300"
+      />
+      <el-table-column
+        prop="amount3"
+        label="数值 3（元）"
+        width="300"
+      />
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StickySumView',
+  data() {
+    return {
+      tableData: [],
+    }
+  },
+  mounted() {
+    for (let i = 0; i < 100; i++) {
+      this.tableData.push({
+        id: '1298712' + i,
+        name: '王小虎',
+        amount1: '234',
+        amount2: '3.2',
+        amount3: 10
+      })
+    }
+  },
+  methods: {
+    getSummaries(param) {
+      const { columns, data } = param
+      const sums = []
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '总价'
+          return
+        }
+        const values = data.map(item => Number(item[column.property]))
+        if (!values.every(value => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr)
+            if (!isNaN(value)) {
+              return prev + curr
+            } else {
+              return prev
+            }
+          }, 0)
+          sums[index] += ' 元'
+        } else {
+          sums[index] = 'N/A'
+        }
+      })
+      return sums
+    }
+  }
+}
+</script>
diff --git a/yarn.lock b/yarn.lock
@@ -1022,6 +1022,15 @@
     "@babel/helper-validator-identifier" "^7.22.5"
     to-fast-properties "^2.0.0"
 
+"@cell-x/el-table-sticky@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/@cell-x/el-table-sticky/-/el-table-sticky-1.0.2.tgz#6a53742d6f4c1ed5c89b31e29f3f678f18324517"
+  integrity sha512-m2st1HuCkFZ8E1rxcPsoUbhC/Tgoj0WoAT0+59HhUgpZKE+bMxh70idhd2v2ItwNkDJAY6hYaVQC1h9qA8J0qQ==
+  dependencies:
+    gemini-scrollbar "^1.5.3"
+    resize-observer-polyfill "^1.5.0"
+    throttle-debounce "^1.0.1"
+
 "@discoveryjs/[email protected]":
   version "0.5.7"
   resolved "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz"
@@ -3692,6 +3701,11 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz"
   integrity sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
 
+gemini-scrollbar@^1.5.3:
+  version "1.5.3"
+  resolved "https://registry.npmjs.org/gemini-scrollbar/-/gemini-scrollbar-1.5.3.tgz#7abc916e103e11f983f15856ef8c583cedef95cf"
+  integrity sha512-3Q4SrxkJ+ei+I5PlcRZCfPePv3EduP7xusOWp7Uw0+XywEWred7Nq9hoaP2IQh1vRjoidaVODV3rO3icFH/e5A==
+
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"