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

最新推荐文章于 2023-05-24 17:13:16 发布

cellinlab

最新推荐文章于 2023-05-24 17:13:16 发布

阅读量519

点赞数 1

分类专栏： JavaScript Vue 文章标签： Vue Vue表格组件 Vue实战 Render 可排序表格组件

本文链接：https://blog.csdn.net/funkstill/article/details/86917298

版权

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

摘要由CSDN通过智能技术生成

一个标准的表格由＜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:'年龄',

最低0.47元/天解锁文章

cellinlab

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js入门 0xE Render函数（4）Render 函数开发可排序的表格组件

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

扫一扫

专栏目录