vue實現(xiàn)移動端table表格簡單方法
更新時間：2023年09月25日 09:47:50 作者：C_心欲無痕
這篇文章主要給大家介紹了關于vue實現(xiàn)移動端table表格簡單方法的相關資料,使用Vue.js開發(fā)移動應用程序時,經(jīng)常需要使用各種UI組件,其中el-table是一個常用的表格組件,可以方便地展示數(shù)據(jù),需要的朋友可以參考下
vue實現(xiàn)移動端的table表格，效果圖如下：
主要實現(xiàn)功能：
1，表頭字段可以進行正序倒序排序功能；
2，可以展開收起；
3，藍色這一行是合計數(shù)據(jù) 需要單獨出來進行渲染，否則排序的時候此行會排亂掉；
用到的模擬數(shù)據(jù)會放到最后面；
4，注意表頭數(shù)據(jù)thList，title是標題，isSort是否可以進行排序，backgroundColor是表示是否添加特殊的背景顏色；sortField是根據(jù)什么字段進行排序；
vue代碼如下：
<template>
<div class="organizationDetails">
<!-- 內(nèi)容區(qū) -->
<div class="table-content" :class="controlHeight">
<table ref="table" class="table">
<!-- 表頭 -->
<tr class="top">
<th v-for="(item_th, index_th) in thList" :key="index_th" :style="{ background: item_th.backgroundColor }">
<span class="title">{{ item_th.title }}</span>
<span class="sort" v-if="item_th.isSort" @click="needSort(item_th.sortField, index_th)" :class="[sortIndex === index_th && isNeedSort ? 'sortUp' : '']"></span>
</th>
</tr>
<!-- 第一行的合計數(shù)據(jù) 需要高亮 -->
<tr class="cont sum" v-for="(item, index) in totalData" :key="index + Math.random() * 24">
<td>{{ item.comname2 }}</td>
<td>{{ item.addAgent }}</td>
<td>{{ item.addAgentRate }}</td>
<td>{{ item.preium }}</td>
<td>{{ item.premiumRate }}</td>
</tr>
<!--展示列表數(shù)據(jù) -->
<tr class="cont" v-for="(item_tr, index_tr) in data11" :key="index_tr">
<td>{{ item_tr.comname2 }}</td>
<td>{{ item_tr.addAgent }}</td>
<td>{{ item_tr.addAgentRate }}</td>
<td>{{ item_tr.preium }}</td>
<td>{{ item_tr.premiumRate }}</td>
</tr>
</table>
</div>
<!-- 顯示更多和收取 點擊更多就展開 -->
<div class="more" v-if="showMoreCom">
<span :colspan="thList.length" @click="showMoreFun(true)" v-if="!showMore">
更多
<van-icon name="arrow-down" />
</span>
<span :colspan="thList.length" @click="showMoreFun2(false)" v-else>
收起全部
<van-icon name="arrow-up" />
</span>
</div>
</div>
</template>
<script>
import { data11, totalData } from './mock/data.js';
export default {
data() {
return {
// 數(shù)據(jù)
data11: [],
totalData: [],
// 表頭列表
thList: [
{
title: '機構',
isSort: false,
},
{
title: '保費',
isSort: true,// 是否進行排序
backgroundColor: '#fdeeee', // 是否單獨顯示背景顏色
sortField: 'addAgent',// 排序字段
},
{
title: '達成率',
isSort: true,
backgroundColor: '#fdeeee',
sortField: 'addAgentRate',
},
{
title: '新增代理人',
isSort: true,
sortField: 'preium',
},
{
title: '代理人達成率',
isSort: true,
sortField: 'premiumRate',
},
],
// 是否需要排序 默認不進行排序
isNeedSort: false,
// 排序序號
sortIndex: null,
// 排序形式 倒敘默認倒敘 false為正序
order: true,
// 是否顯示更多
showMore: this.showMoreCom,
};
},
computed: {
// 控制展開和收起的類名
controlHeight() {
if (this.showMore) {
return 'normalHeight';
} else {
return 'controlHeight';
}
},
// 判斷是否展開 這里判斷如果數(shù)大于11條時就進行顯示展開
showMoreCom() {
return this.data11.length > 11;
},
},
watch: {
// 監(jiān)聽是否需要排序 與排序形式相統(tǒng)一 這是比較簡便的方法
isNeedSort: {
handler(newV) {
this.order = newV;
},
immediate: true, // 注意 這里要立即進行觸發(fā)
},
},
created() {
this.data11 = data11;
this.totalData = totalData; // 合計數(shù)據(jù)
},
mounted() {},
methods: {
chooseYearMonth(date) {
this.yearMonth = date;
},
// 控制顯示更多
showMoreFun(boolean) {
this.showMore = boolean;
},
showMoreFun2(boolean) {
this.showMore = boolean;
},
// 點擊排序處理排序箭頭 然后調(diào)用排序方法 需要處理防抖
needSort(sortField, index) {
// 排序完成的數(shù)據(jù) 再次點擊排序就恢復初始值
if (this.isNeedSort) {
this.isNeedSort = false;
this.sortIndex = null;
this.startSort(sortField, this.order);
return;
}
this.isNeedSort = true;
this.sortIndex = index;
this.startSort(sortField, this.order);
},
// 開始排序 第一個參數(shù)是根據(jù)什么排序 第二個參數(shù)是倒序默認值
startSort(sortField, order) {
this.data11 = this.data11.sort((a, b) => {
// 進行轉(zhuǎn)換一下
let value1 = b[sortField];
let value2 = a[sortField];
if (order) {
// 倒序
return parseFloat(this.delete(value1)) - parseFloat(this.delete(value2));
} else {
// 正序
return parseFloat(this.delete(value2)) - parseFloat(this.delete(value1));
}
});
},
// 處理字符串
delete(str) {
if (typeof str === 'string') {
return str.split(',').join('');
} else {
return str;
}
},
},
};
</script>
<style scoped lang="scss">
// 控制高度
.controlHeight {
height: 485px;
overflow: hidden;
transition: 0.3s;
}
// 正常高度
.normalHeight {
height: 100%;
transition: 0.3s;
}
// 頭部
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
height: 40px;
}
// 表格相關樣式
table {
border-collapse: collapse;
width: 98%;
margin: 0 auto;
text-align: center;
font-size: 14px;
// 每一行下面加邊框
tr {
border-bottom: 1px solid #f1f1f1;
}
.cont {
height: 40px;
}
}
// 表頭設置
.top {
height: 40px;
line-height: 40px;
background: rgb(242, 245, 247);
.title {
margin-right: 3px;
}
th {
border-left: 1px solid #e9ebec;
font-weight: 500;
}
}
// 合計一行高亮顯示
.sum {
color: #005dff;
font-weight: bold;
}
// 正常排序的樣式
.sort {
display: inline-block;
width: 7px;
height: 10px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAeCAYAAAG012XDAAAABGdBTUEAALGPC/xhBQAAAppJREFUSA3dVjtvE0EQnjkbkCMRhBTIHwi/gdgSBQSIi1iOA3ZNT5HUQIfow6OnvwM/5BR2zKNAsvkP5A8kIEA4xALsW2b2POs9353jioKVzjP7zbezM7MvA1gNWXdrLWVhlhpvYTTeEuttNt2aLTaYSimvcc1zu90Mf9agQHVr+/cEdFjxaq0dAP9lIAGw2Xy/NBj++iysTPrcJdFPl0hJdImWtag9iXdEIE/qU6wpQ7ArNMlgbKawXlPNt8hQLZfyd8woUgzZbb7JwnDI84ZbOp2rFG72GJQYEhZwMi5UxwmcrIlnyS6JqbPWNdfpI3yJZRIu5TEJCtEu1alxup3Ohb29DxdlsEgdgnSUUg4cj76f/Pn5VetiIBkievU2J6ibrTNgiG6tfRJQJr82poluvf0JQEX3JmGBjVbLq7deKAX3J36iGiI+j6L/DEGv1n6sQD2aOSPiE9Qn8fBHpDShgcuLC04llxtQNa+EDHaHbMzRdawU8wfopEJHgrmMsY11szLl4q0qOrjLIDfWGQt6Mb98jsdnOWSN7MmQlTo62aP+O1BqFRA/wuXzN3Re00Srb8K0MKNSFLvA1WOH3FhSX+OGFVViI/UanS3ljzyiz5rUpyKW4+oTcuo2WiugoEffUnT+BITPPUJWVohZ2ul4k7ylvn15JnhJhHuwvLhm9gge9h8Q9WoifQ4DHbNVOOo/nIP6v1P0Qs1zNc1TCKrrs/Lm+rbZUvrlHf2m7aRW5nEQ4iAeZFJns4XCdf2sGKdCCt7IEW2vuJtXWCJxAOnUmrydBhVlWrqN/W3wfXO7TNvBcXYqxdtPIzgBkUhtEj9Jr+ptj/8CCE4Dqnc318tUP1+waTnTqZD5gYRjVVo4k2lsbFz7JniS/AspWgleJ+XDaAAAAABJRU5ErkJggg==);
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
}
// 激活排序的樣式
.sortUp {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAeCAYAAAG012XDAAAABGdBTUEAALGPC/xhBQAAAqRJREFUSA3lVj1vE0EQnTljkFMQIRlRIDr4BRTJWUKQBEiKWE4Cdk1PkdRAh+gDpKe3Qz7kJiHEB0LyGck0tKSDICEQoAhijLGXmT3veffOd6c0NIxk7eybN7Ozs7O3BtAEpV5zhYZpanl9a5iF+UfwiaVrq8lkgkuW5me8JJlYrtcz/NOc+qrj3lKgJRWnsQQCngCPJAhOMwui81mxANOnfT1RQUqrTixbY7oq3y6BvGiPck35hOBGfINUao2nsoQ8BmSw3Revbej1eF1TLCsHV8ZcBj1y5GFofpP2ILAGR6rB3UUR5a5lzeX2Eb4MZRKuyhPKQy+Vcd5DIzWbo/Dq7amgzTt2hQphwUHnO3R+fgXWNTGXD5ZOK9PAy3EPtQCeqmEe0XHfUceFe5MxtpFQFzZWKJ/boWgm8Nic/tMZVta37wsQ92JXRXyA8iZ+OgiXRvc8c3LEKuVyLbohF3Tc0MnGHFnHUmFmD63UDYNAE8bYxrh/MsXCtTW0cFmRWWdMzUMj3+P+XTZsZlMYpv6k/j4D7f0and44IDbgxNlJyJ1rDaMqzE9TAcboNJbh14dDGZANHJjnjMfI8ExfugvQxQpFiVkUe5ASRbhsh+pjBnXenAfouJRRNiYR04RI9z5tw8RFeUJs9IJ6ddulYPrH03ROmiG6VO8prre3vfb+HbprY0l+CfZxaH+8m8D5H8zyoCobWytCQNKnKbEeiPioODe96LdUtepkW93f3E7UVkcUxL1M6ridz0/IZ8UPqsKUq89t+NPdpcYPf3kVyR+xBcdSU6X8Vfl2KjgUVBnKm88W6QGOvo6WtVQqXH+o+PoYGZRJgp6k1Y3tCv25WlBO5LB2c266SPXrKSw4xgZV5PLOzij8EPMj6czm7OylbwqPGv8Ccef3M+dWP3cAAAAASUVORK5CYII=);
}
.more {
height: 40px;
text-align: center;
line-height: 40px;
span {
display: inline-block;
}
span:active {
transition: height 0.3s;
}
}
</style>模擬數(shù)據(jù) data.js 如下：
// 模擬數(shù)據(jù) 11月份機構詳細
export const data11 = [
{
comname2: '貴州',
addAgent: 136,
addAgentRate: '26.8%',
preium: '1,005.0',
premiumRate: '143.6%',
},
{
comname2: '遼寧',
addAgent: 201,
addAgentRate: '100.5%',
preium: '805.8',
premiumRate: '71.1%',
children: [
{
comname2: '遼陽',
addAgent: 100,
addAgentRate: '120.5%',
preium: '805.8',
premiumRate: '71.1%',
},
{
comname2: '沈陽',
addAgent: 101,
addAgentRate: '130.5%',
preium: '805.8',
premiumRate: '71.1%',
},
],
},
{
comname2: '四川',
addAgent: 27,
addAgentRate: '13.5%',
preium: '769.2',
premiumRate: '100.9%',
},
{
comname2: '江西',
addAgent: 306,
addAgentRate: '102%',
preium: '748.8',
premiumRate: '213.9%',
},
{
comname2: '云南',
addAgent: 42,
addAgentRate: '8%',
preium: '643.0',
premiumRate: '213.6%',
},
{
comname2: '福建',
addAgent: 45,
addAgentRate: '9.7%',
preium: '514.5',
premiumRate: '93.5%',
},
{
comname2: '河南',
addAgent: 26,
addAgentRate: '26%',
preium: '512.1',
premiumRate: '88.3%',
},
{
comname2: '安徽',
addAgent: 1,
addAgentRate: '0.3%',
preium: '398.7',
premiumRate: '102.2%',
},
{
comname2: '甘肅',
addAgent: 43,
addAgentRate: '10.4%',
preium: '393.6',
premiumRate: '69.3%',
},
{
comname2: '陜西',
addAgent: 52,
addAgentRate: '12.3%',
preium: '374.5',
premiumRate: '46.8%',
},
{
comname2: '湖南',
addAgent: 53,
addAgentRate: '10.2%',
preium: '356.5',
premiumRate: '45%',
},
{
comname2: '海南',
addAgent: 36,
addAgentRate: '12.8%',
preium: '341.3',
premiumRate: '103.7%',
},
{
comname2: '湖北',
addAgent: 25,
addAgentRate: '6.5%',
preium: '336.5',
premiumRate: '98.1%',
},
{
comname2: '青島',
addAgent: 10,
addAgentRate: '6.7%',
preium: '289.0',
premiumRate: '111.1%',
},
{
comname2: '黑龍江',
addAgent: 5,
addAgentRate: '2.2%',
preium: '286.2',
premiumRate: '54%',
},
{
comname2: '廣東',
addAgent: 17,
addAgentRate: '3.5%',
preium: '265.9',
premiumRate: '57.8%',
},
{
comname2: '重慶',
addAgent: 46,
addAgentRate: '31.3%',
preium: '240.6',
premiumRate: '88.5%',
},
{
comname2: '江蘇',
addAgent: 40,
addAgentRate: '9.6%',
preium: '238.2',
premiumRate: '34%',
},
{
comname2: '山西',
addAgent: 178,
addAgentRate: '57.6%',
preium: '214.9',
premiumRate: '75.1%',
},
{
comname2: '新疆',
addAgent: 13,
addAgentRate: '130%',
preium: '189.1',
premiumRate: '370.8%',
},
{
comname2: '青海',
addAgent: 6,
addAgentRate: '3.9%',
preium: '152.1',
premiumRate: '257.8%',
},
{
comname2: '寧夏',
addAgent: 7,
addAgentRate: '2.5%',
preium: '144.1',
premiumRate: '87.9%',
},
{
comname2: '廣西',
addAgent: 0,
addAgentRate: '0%',
preium: '108.7',
premiumRate: '63.9%',
},
{
comname2: '寧波',
addAgent: 8,
addAgentRate: '14.3%',
preium: '106.8',
premiumRate: '113.6%',
},
{
comname2: '天津',
addAgent: 16,
addAgentRate: '7.8%',
preium: '96.0',
premiumRate: '68.6%',
},
{
comname2: '蘇州',
addAgent: 0,
addAgentRate: '0%',
preium: '21.2',
premiumRate: '0%',
},
{
comname2: '廈門',
addAgent: 0,
addAgentRate: '0%',
preium: '0.2',
premiumRate: '0.4%',
},
{
comname2: '深圳',
addAgent: 0,
addAgentRate: '0%',
preium: '0.0',
premiumRate: '0%',
},
{
comname2: '無錫',
addAgent: 0,
addAgentRate: '0%',
preium: '0.0',
premiumRate: '0%',
},
{
comname2: '上海',
addAgent: 0,
addAgentRate: '0%',
preium: '0.0',
premiumRate: '0%',
},
{
comname2: '北京',
addAgent: 0,
addAgentRate: '0%',
preium: '0.0',
premiumRate: '0%',
},
];
// 第一行合計數(shù)據(jù)
export const totalData = [
{
comname2: '合計',
addAgent: 2864,
addAgentRate: '29.7%',
preium: '16,474.7',
premiumRate: '94.9%',
},
];總結
到此這篇關于vue實現(xiàn)移動端table表格的文章就介紹到這了,更多相關vue移動端table表格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
v-model就是vue的雙向綁定的指令,能將頁面上控件輸入的值同步更新到相關綁定的data屬性,也會在更新data綁定屬性時候,更新頁面上輸入控件的值,這篇文章主要介紹了Vue之v-model的使用,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了vue如何動態(tài)獲取當前時間問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
Vue 的 keep-alive 是一個內(nèi)置組件,用于緩存不活動的組件實例,避免重復渲染,從而優(yōu)化應用性能,下面就跟隨小編一起來看看其核心實現(xiàn)原理和緩存內(nèi)容吧2025-03-03
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)日歷功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
使用Vue調(diào)取接口,并渲染數(shù)據(jù)的示例代碼
今天小編就為大家分享一篇使用Vue調(diào)取接口,并渲染數(shù)據(jù)的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
下面小編就為大家分享一篇vue2.0安裝style/css loader的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue2使用jspdf插件實現(xiàn)頁面自定義塊pdf下載方式
本文介紹了在Vue項目中實現(xiàn)PDF下載功能的案例,使用了jspdf和html2-canvas插件,實現(xiàn)了點擊按鈕彈出下載進度彈窗并顯示四個模塊下載進度,下載完成后關閉彈窗的功能,文中提供了使用的插件版本和相關代碼,供讀者參考2026-04-04
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)分頁查詢功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了vue 配置多頁面應用的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了Vue 實現(xiàn)手動刷新組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02