基于Vue.js实现的可搜索可排序表格

使用了踏得网的Web作品API接口。

vue, json, table

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2900
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();

var v = new Vue({
    el: '#app',

data: () => {
        return {
            message: 'Hello Vue!',
            user: 'iefreer',
            pages: [],
            order: 1,
            currentSort: 'vote',
            columns: ['comments', 'views', 'vote', 'lovesPerView', 'commentsPerView']
        }
    },

created() {
        this.fetch();
    },

computed: {

results: function() {
            var results = [].concat.apply([], this.pages);
            var sortKey = this.currentSort;
            if (sortKey) {
                results = results.slice().sort((a, b) => {
                    a = a[sortKey];
                    b = b[sortKey];
                    return (a === b ? 0 : a > b ? -1 : 1) * this.order;
                });
            }

return results;
        }
    },

methods: {

sort(sortKey) {
                this.order = (this.currentSort === sortKey ? this.order * -1 : 1);
                this.currentSort = sortKey;
            },

fetch() {
                this.pages = [];
                for (var i = 0; i < 1; i++) {
                    this.getPage(i);
                }
            },

clearUser() {
                this.user = null;
                this.fetch();
            },

getPage(page = 0) {

var url = 'https://api.techbrood.com/v1/fiddles?token=mike-api&page=' + (page + 1);

if (this.user) {
                    url = 'https://api.techbrood.com/v1/fiddles?token=mike-api&user=' + this.user + '&page=' + (page + 1);
                }

fetch(url)
                    .then((response) => response.json())
                    .then((responseJSON) => {
                        //console.log(url, page);

responseJSON.result.list.forEach((d) => {
                            d.vote = d.vote || 0;
                            d.views = d.views || 0;
                            d.comments = d.comments || 0;
                            d.lovesPerView = d.vote / d.views + '%';
                            d.commentsPerView = d.comments / d.views + '%';
                        });

Vue.set(this.pages, page, responseJSON.result.list);
                    });
            }
    }
})

编译

CSS

html {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
    line-height: 1.5;
    font-size: 15px;
    font-weight: 400;
}
body {
    background: #343338;
    color: white;
}
a,
.sortable {
    color: #76daff;
    text-decoration: none;
}
body {
    padding: 2em;
}
.icon {
    width: 12px;
    height: 13px;
    fill: #FFF;
    fill: currentColor;
}
table {
    margin: 0 auto;
}
th {
    text-align: left;
    font-weight: normal;
}
thead th {
    white-space: nowrap;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 12px;
}
th svg {
    width: 0.6em;
    height: auto;
    vertical-align: middle;
}
td,
th {
    padding: 0.2em 0.5em;
    line-height: 1.6;
}
tbody {
    color: #999;
}
tbody tr {
    background: #2A292D;
}
tbody tr:nth-child(even) {
    background: #28272a;
}
/* //////////////////////////////////////// */

input[type='name'],
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='url'],
input[type='tel'],
input[type='number'],
textarea {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
    font-size: 13px;
    -webkit-appearance: none;
    padding: 4px 5px 4px 5px;
    outline: 0;
    border: 3px solid #ccc;
    border-radius: 2px;
    -webkit-transition: border-color 0.2s;
    transition: border-color 0.2s;
}
button {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
    -webkit-appearance: none;
    font-size: 1rem;
    text-shadow: none;
    line-height: 1.2;
    display: inline-block;
    border: 0;
    outline: 0;
    padding: 3px 12px;
    margin: 0 20px 0 0;
    position: relative;
    border-radius: 3px;
    border: 3px solid transparent;
    color: white;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none !important;
    cursor: pointer;
    text-align: center;
    font-weight: normal !important;
    background: #111;
}
.filters {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px;
}
.filters:last-child {
    margin-right: 0;
}

HTML

<table>
        <caption>
            <div class="filters">
                <button @click="clearUser">Recent Picks</button>

<label>
                    User:
                    <input type="search" size="13" v-model="user" :value="user" @keydown.enter="fetch" />
                    <button @click="fetch"> Go </button>
                </label>
            </div>
        </caption>
        <thead>
            <tr>
                <th scope="col">Title</th>
                <th scope="col" v-if="!user">User</th>
                <th scope="col" class="sortable" v-for=" (key,i) in columns " @click="sort(key)">
                    <template v-if=" key === 'commentsPerView' || key === 'lovesPerView' ">
                        <svg class="icon">
                            <use xmlns:xlink="https://www.w3.org/1999/xlink" :xlink:href="( key=== 'lovesPerView' ? '#heart' : '#comment' )"></use>
                        </svg>/
                        <svg class="icon">
                            <use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="#eye"></use>
                        </svg>
                    </template>
                    <template v-else>{{key}}</template>
                    <svg viewBox="0 0 10 5">
                        <path v-if="currentSort === key" d="M5,0 L10,5 L0,5 Z" fill="currentColor" :transform=" order > 0 ? 'scale(1 -1) translate(0 -5)' : ''" />
                    </svg>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr v-for=" (result,i) in results ">
                <th v-if="result" scope="row">
                    <a rel="nofollow" rel="noreferrer" :href=" result.link" v-html=" result.name " target="_blank"></a>
                </th>
                <td v-if="!user" v-html="result.user.username"></td>
                <td v-for=" (key,i) in columns " v-if="result" v-html="result[key]"></td>
            </tr>
        </tbody>
    </table>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.0.5/es6-promise.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.2/fetch.min.js'></script>

使用了踏得网的Web作品API接口。

vue, json, table

编辑器支持Emmet

快捷键

使用了踏得网的Web作品API接口。

vue, json, table

使用Vue.js实现的待办事项列表应用程序

使用Vue2.js实现的矩阵排序动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：