Vue中的vxe-table教程8-表格排序

知识点：1. 基本排序：sortable2. 点击表头进行排序, trigger设置触发原，defaultSort设置默认排序字段及排序顺序，orders设置排序轮转顺序效果图：1. index.html代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>

专职

10821人浏览 · 2021-01-12 13:55:08

专职 · 2021-01-12 13:55:08 发布

知识点：

1. 基本排序：sortable
2. 点击表头进行排序, trigger设置触发原，defaultSort设置默认排序字段及排序顺序，orders设置排序轮转顺序

效果图：

1. index.html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
    <script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
    <!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->
</head>

<body>
<div id="app">
    <template>
        <div style="padding: 20px 50px 0 50px">
            <!--
                1. 基本排序：sortable
                2. 点击表头进行排序, trigger设置触发原，defaultSort设置默认排序字段及排序顺序，orders设置排序轮转顺序
                :sort-config="{trigger: 'cell', defaultSort: {field: 'age', order: 'desc'}, orders: ['desc', 'asc', null]}"
            -->
            <vxe-table
                    border
                    show-overflow
                    highlight-hover-row
                    max-height="480"
                    align="center"
                    :sort-config="{trigger: 'cell', defaultSort: {field: 'age', order: 'desc'}, orders: ['desc', 'asc', null]}"
                    :data="tableData"
            >
                <vxe-table-column title="序号" type="seq" width="65"></vxe-table-column>
                <vxe-table-column field="name" title="姓名"></vxe-table-column>
                <vxe-table-column field="sex" title="性别"></vxe-table-column>
                <vxe-table-column sortable field="age" title="年龄"></vxe-table-column>
                <vxe-table-column field="date" title="日期"></vxe-table-column>
                <vxe-table-column field="address" title="地址"></vxe-table-column>
            </vxe-table>
        </div>
    </template>
</div>
</body>

<script src="./js/main.js"></script>
<link rel="stylesheet" href="./css/main.css">
</html>

2. main.css代码

@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");

.vxe-textarea--inner {
    line-height: inherit;
}

3. main.js代码

var Main = {
    data() {
        return {
            tableData: [],
        }
    },
    created() {
        var list = [];
        for (var index = 0; index < 15; index++) {
            list.push({
                name: 'test' + index,
                role: 'developer',
                sex: '男',
                age: index + 18,
                date: '2019-5-' + (index + 1),
                time: 1556677810888 + index * 500,
                region: 'ShenZhen',
                address: '河北省保定市易县裴山镇南庄村酒厂大渠往西的向阳村居委会' + index
            })
        }
        this.tableData = list
    },
    methods: {

    }
};

var app = new Vue(Main).$mount('#app');

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^