【前端】实现Table表格自定义列

最新推荐文章于 2025-12-11 20:14:34 发布
原创 最新推荐文章于 2025-12-11 20:14:34 发布 · 320 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #vue.js

一、需求场景

在Web开发的时候，Table表格是十分常见的组件。有的时候，表格的列项会有很多项，全部加载出来表格就会出现横向滚动条，靠后的就需要拖动滚动条才能看见。从易用性的角度来说，是不太方便的，虽然可以将不太重要的信息放置最后，例如下面这样。
在这里插入图片描述
在这里插入图片描述
这个时候可以采用配置Table表格的列来实现优化。默认展示重要的信息，其他相对不是那么重要的信息就可以根据不同的用户，由用户自行配置显示。

二、准备工作

本Demo使用的是vue2 + Ant Design Vue组件库开发，所以需要在本地自行提前安装好开发环境（你也可以根据具体开发环境安装vue3）。
还有就是本实例中使用到了拖动排序，
在这里插入图片描述

所以需要安装 sortablejs 这个依赖。

"dependencies": {
    "ant-design-vue": "^4.2.6",
    "core-js": "^3.8.3",
    "sortablejs": "1.15.2",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },

实现过程

开发环境准备就绪过后就开始代码实现
首先，将Table表格的列项准备，这里我是使用浏览器缓存 localStorage 实现选择暂存，这里就直接贴图代码了，代码也是有注释的，不明白的可以留言。

// 设置本地缓存
export const storageKeys = {
  // 上一次选择的列表
  COLUMN: "COLUMN",
  // 上一次选择的列
  CHECKED_OPTIONS: "CHECKED_OPTIONS",
  // 上一次选择的
  CHECKED_GROUP: "CHECKED_GROUP"
}

export const setStorage = (key, value) => {
  const jsonData = JSON.stringify(value);
  localStorage.setItem(key, jsonData);
}

export const getStorage = (key, response) => {
  const jsonData = localStorage.getItem(key);
  if (jsonData) {
    return JSON.parse(jsonData);
  }
  return response || null;
}

// 全部table column 数据
export const columns = [
  {
    label: "列项一",
    key: "lx1",
    disabled: false,
    content: {
      title: "列项一",
      dataIndex: "lx1",
      key: "lx1",
      resizable: true,
      minWidth: 100
    }
  },
  {
    label: "列项二",
    key: "lx2",
    disabled: false,
    content: {
      title: "列项二",
      dataIndex: "lx2",
      key: "lx2",
      resizable: true,
      minWidth: 120
    }
  },
  {
    label: "列项三",
    key: "lx3",
    disabled: false,
    content: {
      title: "列项三",
      dataIndex: "lx3",
      key: "lx3",
      resizable: true,
      minWidth: 120
    }
  },
  {
    label: "列项四",
    key: "lx4",
    disabled: false,
    content: {
      title: "列项四",
      dataIndex: "lx4",
      key: "lx4",
      resizable: true,
      minWidth: 240
    }
  },
  {
    label: "列项五",
    key: "lx5",
    disabled: false,
    content: {
      title: "列项五",
      dataIndex: "lx5",
      key: "lx5",
      resizable: true,
      minWidth: 80
    }
  },
  {
    label: "列项六",
    key: "lx6",
    disabled: false,
    content: {
      title: "列项六",
      dataIndex: "lx6",
      key: "lx6",
      resizable: true,
      minWidth: 120
    }
  },
  {
    label: "列项七",
    key: "lx7",
    disabled: false,
    content: {
      title: "列项七",
      dataIndex: "lx7",
      key: "lx7",
      resizable: true,
      minWidth: 80
    }
  },
  {
    label: "列项八",
    key: "lx8",
    disabled: false,
    content: {
      title: "列项八",
      dataIndex: "lx8",
      key: "lx8",
      resizable: true,
      minWidth: 80
    }
  },
  {
    label: "列项九",
    key: "lx9",
    disabled: false,
    content: {
      title: "列项九",
      dataIndex: "lx9",
      key: "lx9",
      resizable: true,
      minWidth: 100
    }
  },
  {
    label: "列项十",
    key: "lx10",
    disabled: false,
    content: {
      title: "列项十",
      dataIndex: "lx10",
      key: "lx10",
      resizable: true,
      minWidth: 100
    }
  },
  {
    label: "列项十一",
    key: "lx11",
    disabled: false,
    content: {
      title: "列项十一",
      dataIndex: "lx11",
      key: "lx11",
      resizable: true,
      minWidth: 100
    }
  },
  {
    label: "列项十二",
    key: "lx12",
    disabled: false,
    content: {
      title: "列项十二",
      dataIndex: "lx12",
      key: "lx12",
      resizable: true,
      minWidth: 100
    }
  },
  {
    label: "列项十三",
    key: "lx12",
    disabled: false,
    content: {
      title: "列项十三",
      dataIndex: "lx12",
      key: "lx12",
      resizable: true,
      minWidth: 100
    }
  },
  {
    label: "列项十四",
    key: "lx12",
    disabled: false,
    content: {
      title: "列项十四",
      dataIndex: "lx12",
      key: "lx12",
      resizable: true,
      minWidth: 100
    }
  },
  {
    label: "列项十五",
    key: "lx12",
    disabled: false,
    content: {
      title: "列项十五",
      dataIndex: "lx12",
      key: "lx12",
      resizable: true,
      minWidth: 100
    }
  },
  {
    label: "列项十六",
    key: "lx12",
    disabled: false,
    content: {
      title: "列项十六",
      dataIndex: "lx12",
      key: "lx12",
      resizable: true,
      minWidth: 100
    }
  },
];

// 默认展示列
export const defaultOptions = ["lx1", "lx3", "lx5", "lx7", "lx9", "lx11"];

// 获取全部列
export const getAllColumns = () => {
  return columns;
}

// 获取默认选项
export const getDefaultOptions = () => {
  return defaultOptions;
}

// 获取初始化的 table 列
export const getInitOptions = () => {
  let options = getStorage(storageKeys.CHECKED_OPTIONS, []);
  if (!options.length) {
    // 缓存没有走默认
    options = getDefaultOptions();
    setStorage(storageKeys.CHECKED_OPTIONS, options);
  }
  return options;
}

export const getInitTableColumns = () => {
  let tableColumns = [];
  let checkedColumns = getInitOptions();
  tableColumns = columns.map(item => {
    if (checkedColumns.includes(item.key)) {
      return item.content;
    }
  }).filter(item => item);
  return tableColumns;
}

关于前端页面，为了复用性，我这里是将列项选择弹窗写成了一个组件。
表格组件（父组件）页面
在这里插入图片描述
代码


```html
<template>
  <div class="about">
    <Space>
      <Button type="primary" @click="openColumnModal">
        <SettingOutlined />
      </Button>
    </Space>

    <Table :dataSource="dataSource" :scroll="{ x: 'max-content', y: 400 }" style="margin-top: 16px;">
      <a-table-column v-for="item in columns" :key="item.key" :title="item.title" :dataIndex="item.dataIndex"
        :resizable="item.resizable" :min-width="item.minWidth" :width="item.minWidth">
      </a-table-column>
    </Table>
    <CustomColumn ref="customColumnRef" @apply="apply" />
  </div>
</template>

<script>
import CustomColumn from "@/components/CustomColumn.vue"
import { Table, Space, Button } from "ant-design-vue";
import { SettingOutlined } from '@ant-design/icons-vue';
import {
  getInitTableColumns,
  getStorage,
  storageKeys
} from "@/data";

export default {
  name: 'AboutView',
  components: {
    CustomColumn,
    Table, Space, Button,
    SettingOutlined
  },
  data() {
    return {
      dataSource: [{
        id: "lx1",
        lx1: "lx1",
        lx2: 'lx1',
        lx3: "lx3",
        lx4: "lx4",
        lx5: "lx5",
        lx6: "lx6",
        lx7: "lx7",
        lx8: "lx8",
        lx9: "lx9",
        lx10: "lx10",
        lx11: "lx11",
        lx12: "lx12",
      },
      {
        id: "lx2",
        lx1: "lx1",
        lx2: 'lx1',
        lx3: "lx3",
        lx4: "lx4",
        lx5: "lx5",
        lx6: "lx6",
        lx7: "lx7",
        lx8: "lx8",
        lx9: "lx9",
        lx10: "lx10",
        lx11: "lx11",
        lx12: "lx12",
      },
      {
        id: "lx3",
        lx1: "lx1",
        lx2: 'lx1',
        lx3: "lx3",
        lx4: "lx4",
        lx5: "lx5",
        lx6: "lx6",
        lx7: "lx7",
        lx8: "lx8",
        lx9: "lx9",
        lx10: "lx10",
        lx11: "lx11",
        lx12: "lx12",
      },
      {
        id: "lx4",
        lx1: "lx1",
        lx2: 'lx1',
        lx3: "lx3",
        lx4: "lx4",
        lx5: "lx5",
        lx6: "lx6",
        lx7: "lx7",
        lx8: "lx8",
        lx9: "lx9",
        lx10: "lx10",
        lx11: "lx11",
        lx12: "lx12",
      },
      {
        id: "lx5",
        lx1: "lx1",
        lx2: 'lx1',
        lx3: "lx3",
        lx4: "lx4",
        lx5: "lx5",
        lx6: "lx6",
        lx7: "lx7",
        lx8: "lx8",
        lx9: "lx9",
        lx10: "lx10",
        lx11: "lx11",
        lx12: "lx12",
      },
      {
        id: "lx6",
        lx1: "lx1",
        lx2: 'lx1',
        lx3: "lx3",
        lx4: "lx4",
        lx5: "lx5",
        lx6: "lx6",
        lx7: "lx7",
        lx8: "lx8",
        lx9: "lx9",
        lx10: "lx10",
        lx11: "lx11",
        lx12: "lx12",
      },
      {
        id: "lx7",
        lx1: "lx1",
        lx2: 'lx1',
        lx3: "lx3",
        lx4: "lx4",
        lx5: "lx5",
        lx6: "lx6",
        lx7: "lx7",
        lx8: "lx8",
        lx9: "lx9",
        lx10: "lx10",
        lx11: "lx11",
        lx12: "lx12",
      },
      {
        id: "lx8",
        lx1: "lx1",
        lx2: 'lx1',
        lx3: "lx3",
        lx4: "lx4",
        lx5: "lx5",
        lx6: "lx6",
        lx7: "lx7",
        lx8: "lx8",
        lx9: "lx9",
        lx10: "lx10",
        lx11: "lx11",
        lx12: "lx12",
      },
      {
        id: "lx9",
        lx1: "lx1",
        lx2: 'lx1',
        lx3: "lx3",
        lx4: "lx4",
        lx5: "lx5",
        lx6: "lx6",
        lx7: "lx7",
        lx8: "lx8",
        lx9: "lx9",
        lx10: "lx10",
        lx11: "lx11",
        lx12: "lx12",
      },
      {
        id: "lx10",
        lx1: "lx1",
        lx2: 'lx1',
        lx3: "lx3",
        lx4: "lx4",
        lx5: "lx5",
        lx6: "lx6",
        lx7: "lx7",
        lx8: "lx8",
        lx9: "lx9",
        lx10: "lx10",
        lx11: "lx11",
        lx12: "lx12",
      },
      ],
      columns: getStorage(storageKeys.COLUMN, null) || getInitTableColumns(),
    }
  },
  mounted() {
  },
  methods: {
    openColumnModal() {
      this.$refs.customColumnRef.showModal();
    },

    apply(cloumn) {
      this.columns = cloumn;
    }
  },
}
</script>

选项弹窗操作组件（子组件）页面
在这里插入图片描述
代码

<template>
  <Modal v-model:open="visible" :width="650" title="列项自定义" okText="应用" cancelText="取消" @ok="confirm" @cancel="cancel">
    <div style="width: 100%;">
      <div style="margin-bottom: 16px;">
        您可以勾选常用的列项，保存为自定义模板
        <Checkbox v-model="allChecked" style="margin-left: 16px;" :checked="allChecked" :indeterminate="indeterminate"
          @click="changeIndeterminate">全选</Checkbox>
      </div>
      <CheckboxGroup v-model:value="checkedOptions" style="width: 100%;">
        <div id="columnMove" style="width: 100%;display: flex;flex-wrap: wrap;justify-content: flex-start;">
          <transition-group type="transition" name="flip-list">
            <Checkbox v-for="item in allOptions" :key="item.key" :value="item.key" :disabled="item.disabled"
              :class="{ filter: item.disabled }" style="width: 150px;margin-bottom: 16px;margin-left: 0px;">
              <span>{{ item.label }}</span>
            </Checkbox>
          </transition-group>
        </div>
      </CheckboxGroup>
    </div>
  </Modal>
</template>

<script>
import { Modal, Checkbox, CheckboxGroup } from "ant-design-vue";
import {
  getInitOptions,
  getAllColumns,
  getDefaultOptions,
  getStorage,
  setStorage,
  storageKeys
} from "@/data";
import { Sortable } from "sortablejs";

export default {
  name: 'CustomColumn',
  components: {
    Modal,
    Checkbox,
    CheckboxGroup
  },
  data() {
    return {
      visible: false,
      allChecked: false,
      checkedOptions: getInitOptions(), //已选择的项
      allOptions: getStorage(storageKeys.CHECKED_GROUP) || getAllColumns(),//所有的操作项
    }
  },
  computed: {
    indeterminate() {
      return this.checkedOptions.length !== this.allOptions.length && this.checkedOptions.length !== 0;
    }
  },
  watch: {
    checkedOptions: {
      handler(newValue) {
        if (newValue.length === this.allOptions.length) {
          this.allChecked = true;
        } else {
          this.allChecked = false;
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    changeIndeterminate(ev) {
      if (ev.target.checked) {
        this.checkedOptions = this.allOptions.map(item => item.key);
      } else {
        this.checkedOptions = getDefaultOptions();
      }
    },

    rowDrop() {
      const _this = this;
      const tBody = document.getElementById("columnMove");
      Sortable.create(tBody, {
        group: {
          name: "moveSetting",
          pull: false,
          put: false,
        },
        handle: "#columnMove",
        sort: true,
        animation: 300,
        filter: ".filter",
        onEnd: function (event) {
          const start = event.oldIndex;
          const end = event.newIndex;
          const arr = [..._this.allOptions];
          if (start > end) {
            arr.splice(end, 0, arr[start]);
            arr.splice(start + 1, 1);
          } else {
            arr.splice(end + 1, 0, arr[start]);
            arr.splice(start, 1);
          }
          _this.allOptions = arr;
        }
      })
    },

    showModal() {
      this.visible = true;
      this.$nextTick(() => {
        this.rowDrop();
      })
    },

    cancel() {
      this.checkedOptions = getStorage(storageKeys.CHECKED_OPTIONS);
      this.visible = false;
    },

    confirm() {
      let columnOption = [];
      this.allOptions.forEach(item => {
        if (this.checkedOptions.includes(item.key)) {
          columnOption.push({
            ...item.content,
          });
        }
      });
      setStorage(storageKeys.COLUMN, columnOption);
      setStorage(storageKeys.CHECKED_OPTIONS, this.checkedOptions);
      setStorage(storageKeys.CHECKED_GROUP, this.allOptions);
      this.$emit("apply", columnOption);
      this.visible = false;
    }
  },
}
</script>

<style scoped lang='scss'></style>

说明：
1、在页面通过点击 这个按钮图标
2、唤起 这个操作列项弹窗。可以拖动改变顺序，勾选选择显示。
3、点击 应用 按钮，关闭弹窗，并将处理后的数据渲染在在Table表格。
4、演示
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
其他玩法：
可以通过配置，让某些选项不可操作，如：列项三、列项四
在这里插入图片描述
只需要将代码中的 disabled 改为 true

{
    label: "列项三",
    key: "lx3",
    disabled: true,
    content: {
      title: "列项三",
      dataIndex: "lx3",
      key: "lx3",
      resizable: true,
      minWidth: 120
    }
  },
  {
    label: "列项四",
    key: "lx4",
    disabled: true,
    content: {
      title: "列项四",
      dataIndex: "lx4",
      key: "lx4",
      resizable: true,
      minWidth: 240
    }
  },

其他的操作，可以根据自己去灵活变更。

@9yue
关注
ElementUI el-table遍历实现表格的自定义列【key值为列名】
2401_84093248的博客
05-10 580
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
谷神前端组件增强：自定义列
weixin_44893650的博客
05-27 283
基于谷神列表api显示/隐藏列、设置列头实现。
4. 前端实现数据表格自定义展示
山间点烟雨
03-06 812
控件来做很方便，如果想把数据按照自己想的样式进行展示，可能需要在此基础做额外的处理。本文中使用比较常用的方法，借助。当然实际项目开发当中，可能需要将数据以更特殊的方式展现，读者可参考本博客进行改造，应该也是能够实现大部分需求的。代码的整个框架可以查看本系列博客的第一篇文章，里面有具体介绍，此篇文章只给出具体功能实现的相关的代码。然后，在自己所需要创建表格展示的地方使用。将数据以表格的形式展现到网页上，使用。基础组件库，所以需要进行引用，只需在。
Django-tables2：高效构建Django HTML表格的利器
gitblog_00660的博客
06-26 483
Django-tables2是一个专为Django框架设计的强大应用，它简化了在Web应用中创建和渲染HTML表格的过程。这个库的核心目标是提供一种声明式的方式来定义表格，同时保持足够的灵活性以满足各种复杂需求。 ## 核心特性详解 ### 1. 多样化的数据源支持 Django-tables2可以处理任何可迭代对象作为数据源，包括： - Python列表和字典 - Django Query...
使用 Ant Design Vue 自定渲染函数customRender实现单元格合并功能rowSpan
redrun博客
11-15 2048
在 Ant Design Vue 的Table组件中，我们可以使用来对某列的渲染进行自定义。我们将使用rowSpan来控制每个单元格的合并效果。表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为0时，设置的表格不会渲染。使用自定义渲染函数，结合数据可以实现单元格合并功能。
ElementUI解决自定义表头
遛狗的代码的博客
03-08 1898
开门见山，我直接阐述我的问题的由来： 根据Element官方的Demo，使用其渲染一个表格需要以下代码： &lt;el-table :data="data" stripe border&gt; &lt;el-table-column prop="date" label="日期" width="180"&gt; &lt
Vue3 Element-Plus el-table 表格 自定义列 - 附完整示例
m0_48968874的博客
10-21 5365
Vue3 Element-Plus el-table 表格 自定义列 - 附完整示例
用于layui table 自定义列
07-06
本教程将深入探讨如何利用layui table实现自定义列，以及如何保存和应用这些自定义模板。 一、layui table组件基础 layui table组件提供了灵活的数据展示方式，包括基本的表格样式、分页、排序、筛选等特性。通过...
layui实现数据表格自定义数据项
10-16
Layui作为一款简洁而功能丰富的前端UI框架，为后台开发人员提供了便捷的开发方式，尤其在处理数据表格及分页方面。Layui内置了数据表格组件，可以帮助开发者快速实现数据的展示、排序、搜索等功能。然而，在使用过程...
element-ui组件table实现自定义筛选功能的示例代码
10-17
在模板部分，使用了<el-table>和<el-table-column>组件来定义数据表格和列。这里要注意的是，我们通过添加render-header属性在<el-table-column>标签中引入了自定义的头部渲染方法renderHeader，这个方法返回的jsx...
Vendure电商平台：自定义Admin UI数据表格组件开发指南
gitblog_00922的博客
06-07 308
你是否曾经在Vendure Admin UI中查看产品列表时，希望某个字段能够以更友好的方式展示？比如将产品slug显示为可点击的链接，或者在价格列中添加货币符号？Vendure提供了强大的自定义数据表格组件功能，让你能够完全控制表格单元格的渲染方式。 本文将深入探讨如何在Vendure Admin UI中创建自定义数据表格组件，从基础概念到实战案例，帮助你掌握这一强大功能。 ## 数据表格组...
将table组件注册全局都可以使用
LRQQHM的博客
10-22 160
import Table from '@/components/utils/Table' const tablePlugin = {} tablePlugin.install = (Vue, opt) => { Vue.component('Table', Vue.extend(Table)) } export default tablePlugin
element UI 动态生成表头
nihao561的博客
02-03 6896
element UI 动态生成表头 拖拽
html自定义列表一行排列,WEB前端设计完美的自定义列表dl，dt，dd
weixin_32522079的博客
06-24 2139
经常会在网页上看见类似这样的页面效果：下面就应用无懈可击的WEB设计方案来实现它：(HTML代码添加在BODY之中，CSS代码添加在之间，一定要编辑在之间)HTML代码：class="box-left">href="images/moon1.jpg"target="_blank">src="images/suo-moon1.jpg" width="200" height="200"/&...
Java实现自定义列
Asan
06-26 3642
在日常开发中查询列表，展示查询字段比如5个字段，其他扩展字段放入自定义列中，由用户勾选展示哪些字段，不展示哪些字段，实现方案如下： 1.定义数据模型： CREATE TABLE `t_user_index_custom_row` ( `created_by` varchar(15) NOT NULL COMMENT '创建人', `create_time` timestamp NUL...
Web项目中表单流程自定义之表单字段用户自定义
qepkwwl的博客
10-12 6598
本文不是是讲的表单字段自定义的富文本编辑器的实现，而是讲在如何在实际项目中实现业务模块的表单自定义功能。
零基础学习WEB前端开发(十)：列表标签（无序列表、自定义列表、有序列表）
陶小桃Blog
10-28 3371
列表主要是用来布局的。 列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由方便。 列表的分类： 无序列表 有序列表 自定义列表 一、无序列表 <ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，列表项使用<li>标签定义。 1.1 基本语法 <ul> <li>列表项1</li> <li>列表项1</li> <li>列表项1</..
DevUI组件库实战：从入门到企业级应用的深度探索，如何快速应用各种组件
最新发布
2401_86031952的博客
12-11 956
DevUI是华为开源的企业级Angular前端解决方案，提供丰富的UI组件和工程化工具。其表单布局示例展示了垂直表单的实现，包含用户名、密码等字段的实时验证、异步查重及密码一致性检查功能。通过响应式布局和国际化支持，DevUI简化了企业级应用开发，确保高可定制性和一致性设计。
Layui Table自定义列拖动功能实现详解
本文所提及的“关于Layui Table 自定义列（列拖动）”，正是围绕如何在 Layui 的 table 模块基础上扩展出列拖动功能展开的技术实现探讨。虽然原生 Layui 并未直接提供列拖动的 API 支持，但通过结合 HTML5 原生的 ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值