《Vue.js实战》- 可排序的表格组件

最新推荐文章于 2024-07-22 15:23:05 发布
最新推荐文章于 2024-07-22 15:23:05 发布
阅读量362 收藏 2
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014773932/article/details/117736981
版权

练习 1 : 查阅资料,了解表格的<colgroup>和<col>元素用法后,给 v-table 的 columns 增加一个可以设置列宽的 width 宇段,并实现该功能。
练习 2 : 将该示例的 render 写法改写为 template 写法,加以对比 ,总 结出两者的差异性,深刻理解其使用场景。

效果图:

项目文件（render和template实现）： index.htm index.js table.js(分render.js或template.js) style.css

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可排序的表格组件</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="app" v-cloak>
        <button @click="handleAddData">添加数据</button>
        <v-table :data="data" :columns="columns"></v-table>
    </div>

    <script src="../../../vue.min.js"></script>
    <script src="table.js"></script>
    <script src="index.js"></script>
</body>
</html>

index.js

let app = new  Vue({
    el: "#app",
    data() {
        return {
            columns: [{
                title: "姓名",
                key: "name",
                width: "25%"
            },{
                title: "年龄",
                key: "age",
                sortable: true,
                width: "25%"
            },{
                title: "出生日期",
                key: "birthday",
                sortable: true,
                width: "25%"
            },{
                title: "地址",
                key: "address",
                width: "25%"
            }],
            data: [{
                name: "王小明",
                age: 18,
                birthday: "2010-02-21",
                address: "北京市朝阳区芍药居"
            },{
                name: "张小刚",
                age: 25,
                birthday: "1992-01-23",
                address: "北京市海淀区西二旗"
            },{
                name: "李晓红",
                age: 30,
                birthday: "1987-11-10",
                address: "上海市浦东新区世纪大道"
            },{
                name: "周小伟",
                age: 20,
                birthday: "1991-10-10",
                address: "深圳市南山区深南大道"
            }]
        }
    },
    methods: {
        handleAddData: function(){
            this.data.push({
                
                    name: "刘晓天",
                    age: 19,
                    birthday: "2021-10-10",
                    address: "北京市东城区东直门"
                
            })
        }
    },
})

render.js

Vue.component("vTable", {
    props: {
        columns: {
            type: Array,
            default: function () {
                return [];
            }
        },
        data: {
            type: Array,
            default: function () {
                return [];
            }
        }
    },
    data: function () {
        return {
            currentColumns: [],
            currentData: []
        }
    },
    methods: {
        makeColumns: function () {
            this.currentColumns = this.columns.map((col, index) => {
                //添加一个字段标识当前列排序的状态,后续使用
                col._sortType = "normal";
                //添加一个字段标识当前列在数组中的索引,后续使用
                col._index = index;

                return col;
            })
        },
        makeData: function () {
            this.currentData = this.data.map((row, index) => {
                row._index = index;
                return row;
            })
        },
        handleSortByAsc: function (index) {
            let key = this.currentColumns[index].key;
            this.currentColumns.forEach(col => {
                col._sortType = "normal";
            })
            this.currentColumns[index]._sortType = "asc";

            this.currentData.sort((a, b) => {
                return a[key] > b[key] ? 1 : -1;
            })
        },
        handleSortByDesc: function (index) {
            let key = this.currentColumns[index].key;
            this.currentColumns.forEach(col => {
                col._sortType = "normal";
            })
            this.currentColumns[index]._sortType = "desc";
            this.currentData.sort((a, b) => {
                return a[key] < b[key] ? 1 : -1;
            })
        }
    },
    mounted() {
        // v -table 初始化时调用
        this.makeColumns();
        this.makeData();
    },
    render(h) {
        let _this = this;

        let trs = [];
        this.currentData.forEach(element => {
            let tds = [];
            _this.currentColumns.forEach(arg => {
                tds.push(h("td", element[arg.key]));
            })
            trs.push(h("tr", tds));
        });

        let ths = [];
        let colArray = []
        this.currentColumns.forEach((col, index) => {
            if (col.sortable) {
                ths.push(h("th", [
                    h("span", col.title),
                    h("a", {
                        class: {
                            on: col._sortType === "asc"
                        },
                        on: {
                            click: function () {
                                _this.handleSortByAsc(index)
                            }
                        }
                    }, "↑"),
                    h("a", {
                        class: {
                            on: col._sortType === "desc"
                        },
                        on: {
                            click: function () {
                                _this.handleSortByDesc(index)
                            }
                        }
                    }, "↓"),
                ]));
            } else {
                ths.push(h("th", col.title))
            }
            colArray.push(h("col",{
                attrs: {
                    width: col.width
                }
            }))
        })
        
        //h 就是 createElement
        return h("table", [
            h("colgroup", colArray),
            h("thead", [
                h("tr", ths)
            ]),
            h("tbody", trs)
        ])
    },
    watch: {
        data: function () {
            this.makeData();
            let sortedColumn = this.currentColumns.filter(col => {
                return col._sortType !== "normal";
            });

            if (sortedColumn.length > 0) {
                if (sortedColumn[0]._sortType === "asc") {
                    this.handleSortByAsc(sortedColumn[0]._index);
                } else {
                    this.handleSortByDesc(sortedColumn[0]._index);
                }
            }
        }
    }
})

template.js

Vue.component("vTable", {
    template: "<table>\
        <colgroup> \
            <col v-for='item in currentColumns' :width='item.width'></col> \
        </colgroup> \
        <thead> \
            <th v-for='(item, index) in currentColumns'>{{ item.title }} \
                <a v-if='item.sortable' :class='{on: item._sortType == \"asc\" }' @click='handleSortByAsc(index)'>↑</a> \
                <a v-if='item.sortable' :class='{on: item._sortType == \"desc\"}' @click='handleSortByDesc(index)'>↓</a> \
            </th> \
        </thead> \
        <tbody> \
            <tr v-for='item in currentData'> \
                <td v-for='(arg, key) in item' v-if='key != \"_index\"'>{{ arg }}</td> \
            </tr> \
        </tbody> \
    </table>",
    props: {
        columns: {
            type: Array,
            default: function () {
                return [];
            }
        },
        data: {
            type: Array,
            default: function () {
                return [];
            },
        }
    },
    data: function () {
        return {
            currentColumns: [],
            currentData: []
        }
    },

    methods: {
        makeColumns: function () {
            this.currentColumns = this.columns.map((col, index) => {
                //添加一个字段标识当前列排序的状态,后续使用
                col._sortType = "normal";
                //添加一个字段标识当前列在数组中的索引,后续使用
                col._index = index;
                return col;
            })
        },
        makeData: function () {
            this.currentData = this.data.map((row, index) => {
                row._index = index;
                return row;
            })
        },
        handleSortByAsc: function (index) {
            let key = this.currentColumns[index].key;
            this.currentColumns.forEach(col => {
                col._sortType = "normal";
            })
            this.currentColumns[index]._sortType = "asc";

            this.currentData.sort((a, b) => {
                return a[key] > b[key] ? 1 : -1;
            })
        },
        handleSortByDesc: function (index) {
            let key = this.currentColumns[index].key;
            this.currentColumns.forEach(col => {
                col._sortType = "normal";
            })
            this.currentColumns[index]._sortType = "desc";
            this.currentData.sort((a, b) => {
                return a[key] < b[key] ? 1 : -1;
            })
        }
    },
    mounted() {
        // v -table 初始化时调用
        this.makeColumns();
        this.makeData();
    },
    watch: {
        data: function () {
            this.makeData();
            let sortedColumn = this.currentColumns.filter(col => {
                return col._sortType !== "normal";
            });

            if (sortedColumn.length > 0) {
                if (sortedColumn[0]._sortType === "asc") {
                    this.handleSortByAsc(sortedColumn[0]._index);
                } else {
                    this.handleSortByDesc(sortedColumn[0]._index);
                }
            }
        }
    }
})

style.css

[v-cloak]{
    display: none;
}

table{
    width: 100%;
    margin-bottom: 24px;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #e9e9e9;
}

table th{
    background: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
    white-space: normal;
}

table td, table th{
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
}

table th a{
    display: inline-block;
    margin: 0 4px;
    cursor: pointer;
}

table th a.on{
    color: #3399ff;
}

table th a:hover{
    color: #3399ff;
}

 

雨水芬纷
关注
专栏目录
在 Vue.js 中实现表格排序功能
weixin_44976692的博客
06-08 4万+
requestNum和，我们需要在columns数组中定义这些字段，并启用排序功能。data() {return {data: [],columns: [title: '请求数',},title: '响应时间',},],通过本文，我们了解了如何在 Vue.js 项目中实现一个具有排序功能的表格。我们使用 Ant Design Vue 组件库来构建表格，并通过定义和sortData方法来处理排序逻辑。希望这些示例和步骤能帮助你在自己的项目中实现类似的功能。
Vue.js实战：构建一个简单的学生管理系统
欢迎来到“Python算法探索”，我是GT算法工程师，一名热爱计算机算法的博主。在这里，我们将一起深入探索Python世界中的各种算法，从基础到高级，从理论到实践。我参加过很多算法比赛，积累了丰富的经验，希望通过这个播客与你分享。让我们一起用Python探
02-28 2843
通过实际操作，你将能够掌握Vue.js的基础知识，并构建出一个功能齐全的学生管理系统。
Vue.js实现可排序的表格组件功能示例
10-17
主要介绍了Vue.js实现可排序的表格组件功能,涉及vue.js事件响应、元素动态操作、排序、运算等相关操作技巧,需要的朋友可以参考下
vuetablecomponent用于展示表格的Vue组件支持过滤和排序
08-14
vue-table-component用于展示表格的Vue组件，支持过滤和排序
vue el-table自定义排序
最新发布
qq_35175478的博客
07-22 308
【代码】vue el-table自定义排序。
表格 html vue,Vue.js实现可排序的表格组件功能示例
weixin_31186111的博客
06-23 467
本文实例讲述了Vue.js实现可排序的表格组件功能。分享给大家供大家参考，具体如下：我们基于 Vue.js 实现一个可根据某列进行排序的表格组件。一个表格包含表头和数据两部分内容。因此，我们定义两个数组，columns 表示表头信息，在 中渲染，并可在此指定某一列是否需要排序；data 表示数据。html：新增把父组件中定义的 data 与 columns 传入 v-table 组件。js：Vu...
vue实现列表排序的效果
浩星
08-03 1584
实现element的列表动态排序效果
Vue中Sortable+多选框进行排序以及自定义列表是否展示
weixin_66518719的博客
10-10 1126
vue中Sortable+多选框进行排序以及自定义列表是否展示
Vue.js：实现可排序表格组件实战教程
在本文中，我们将学习如何使用Vue.js构建一个可排序的表格组件。Vue.js 是一个流行的前端框架，它允许我们轻松地创建交互式用户界面。本文的核心内容是关于如何在 Vue 应用中实现表格的排序功能，以便用户能够根据...
Vue.js实战：打造可排序表格组件
Vue.js实现可排序的表格组件功能，涉及到前端开发中的组件化思想、事件处理、数据绑定以及数据操作等多个关键知识点。以下是对这些知识点的详细解析： 1. **Vue.js组件化**： Vue.js的核心特性之一就是组件化，它...
Vue.js实战：实现表格的筛选、搜索、排序与分页功能
在本文中，我们将探讨如何使用Vue.js来构建一个功能丰富的表格组件，该组件支持多条件筛选、搜索、排序以及分页。Vue.js是一个轻量级但功能强大的JavaScript框架，非常适合构建动态用户界面。通过学习这一实践教程，...
v-tablegrid:更简单易用的实用数据表
05-02
v-tablegrid 更简单易用的实用数据表 状态 Vue插件系列 插入 地位 描述 一个简单的分页栏，包括长度菜单，i18n支持 一个简单而强大的对话框，包括模式，警报，蒙版和吐司模式 更简单易用的实用数据表 一个Vue2插件，可以使文件上传变得简单，容易， 您可以拖动文件或在对话框中选择文件进行上传 Vue2的简单树，支持单个或多个（检查）选择树， 并支持服务器端数据 v画廊 Vue2插件可在图库中浏览图像 v区 一个简单的区域选择器，提供中文行政区划数据 v-selectpage Vue2，分页列表或表格视图的强大选择器， 使用标签进行多项选择，i18n和服务器端资源支持 建议 一个Vue2插件，可通过自动完成功能提供输入建议 垂直播放 Vue2插件可简化视频播放 v选择菜单 一个简单，容易和高度定制的菜单解决方案 安装 npm i v-tablegrid
Vue Grid Layout 实现元素拖拽改变元素布局顺序功能（以el-card为例）
Yusian_的博客
01-08 957
Vue Grid Layout 实现元素拖拽改变元素布局顺序功能（以el-card为例）
【Vue实用功能】Vue实现拖拽元素、列表拖拽排序
weixin_44590591的博客
10-27 3448
【Vue实用功能】Vue实现拖拽元素、列表拖拽排序 左右两个容器，左边和右边的元素可以拖动互换 列表拖拽排序
VTable: 不只是高性能的多维数据分析表格
玄魂工作室
10-09 409
VTable是一款基于可视化渲染引擎VRender的高性能表格组件库，提供了卓越的性能和强大的多维分析能力，以及灵活强大的图形能力。VTable支持百万级数据的快速运算和渲染，可以自动分析和呈现多维数据，无缝融合VChart，为用户提供了强大的数据分析和可视化能力。VTable提供了丰富的功能，包括多种表格类型、单元格内容类型、交互功能、主题、样式、自定义渲染等，以满足用户的各种需求。如果你正在寻找一款高效、易用的数据表格库，VTable是一个不错的选择！暂时无法在飞书文档外展示此内容。
通用表格:可折叠,可合并,多列折行显示,自定义固定头,自定义固定列,移动端,vue
伟大的程序员
06-06 2848
一基本用法: js模板: <script> var genbody = ` <table> <colgroup> <col width="20%"></col> <col wid...
vue3-todolist （自带撸个Table和Datepicker组件）
qq_24724109的博客
10-08 1143
vue3-todolist 0. 前言 之前已经学了一波vue3，笔记在vue3学习笔记 想直接看代码的可以去github 1. 实现效果 2. 需求分析 1. 模块功能分析 列表展示(静态展示 + 状态修改) table静态展示 table支持自定义列 (自定义slot的插入) 事件录入(控制部分) 自定义的input输入框 日期选择器 2. 组件分析 通过上面的分析，我们需要撸的组件大概有这么几个： table button input datepicker 好了需求明确了，废话不
Vue.js 实践（2）：实现多条件筛选、搜索、排序及分页的表格功能
weixin_34130269的博客
06-03 6997
与上周的第一篇实践教程一样，在这篇文章中，我将继续从一种常见的功能——表格入手，展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比，说明各自的适用场景，也为vue2.0版本中即将删除的部分filter功能做准备。 需求分析 还是先从需求入手，想想实现这样一个功能需要注意什么、大致流程如何、有哪些应用...
vue组件之table表格
热门推荐
weixin_34289454的博客
05-15 5万+
table表格组件预览地址 （展示官网会略卡，一开始容易加载不出来） 基于vue写一个table组件 目前暂时打算完成的功能 固定表头 固定列 固定排序，接受排序函数，请求后端排序 请求时期的动画 多选框 展开行 结构和api借鉴AntDesign的， <x-table :columns="columns1" :data="data"> </x-table...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值