Vue.js入门 0xE Render函数（4）Render 函数开发可排序的表格组件

最新推荐文章于 2025-10-05 10:08:50 发布

原创

最新推荐文章于 2025-10-05 10:08:50 发布 · 579 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #Vue表格组件 #Vue实战 #Render #可排序表格组件

本文介绍如何使用Vue.js的Render函数创建一个可排序的表格组件。组件通过columns和data两个属性来定义表格结构和数据，columns用于描述列信息并渲染表头，支持排序功能；data则包含每一行的具体数据，根据columns决定列的顺序。

一个标准的表格由＜table＞、＜thead＞、＜tbody＞、< tr >、＜th＞、＜td＞等元素组成。
表格组件的所有内容（表头和行数据）由两个 prop 构成： columns 和 data。两者都是数组， columns用来描述每列的信息，井渲染在表头＜thead> 内，可以指定某一列是否需要排序： data 是每一行的数据，由 columns 决定每一行里各列的顺序。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>可排序表格组件</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="app" v-cloak>
            <v-table :data="data" :columns="columns"></v-table>
            <button @click="handleAddData">添加数据</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="table.js"></script>
        <script src="index.js"></script>
    </body>
</html>

index.js

var app = new Vue({
    el:'#app',
    data:{
        columns:[
            {
                title:'姓名',
                key:'name'
            },
            {
                title:'年龄',
                key:'age',
                sortable:true
            },
            {
                title:'出生日期',

最低0.47元/天解锁文章