欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)移動(dòng)端table表格簡單方法

 更新時(shí)間：2023年09月25日 09:47:50   作者：C_心欲無痕  
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)移動(dòng)端table表格簡單方法的相關(guān)資料,使用Vue.js開發(fā)移動(dòng)應(yīng)用程序時(shí),經(jīng)常需要使用各種UI組件,其中el-table是一個(gè)常用的表格組件,可以方便地展示數(shù)據(jù),需要的朋友可以參考下

vue實(shí)現(xiàn)移動(dòng)端的table表格，效果圖如下：

主要實(shí)現(xiàn)功能：

1，表頭字段可以進(jìn)行正序倒序排序功能；

2，可以展開收起；

3，藍(lán)色這一行是合計(jì)數(shù)據(jù) 需要單獨(dú)出來進(jìn)行渲染，否則排序的時(shí)候此行會(huì)排亂掉；

用到的模擬數(shù)據(jù)會(huì)放到最后面；

4，注意表頭數(shù)據(jù)thList，title是標(biāo)題，isSort是否可以進(jìn)行排序，backgroundColor是表示是否添加特殊的背景顏色；sortField是根據(jù)什么字段進(jìn)行排序；

在這里插入圖片描述

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>
        <!-- 第一行的合計(jì)數(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>
    <!-- 顯示更多和收取 點(diǎn)擊更多就展開 -->
    <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: '機(jī)構(gòu)',
          isSort: false,
        },
        {
          title: '保費(fèi)',
          isSort: true,// 是否進(jìn)行排序
          backgroundColor: '#fdeeee', // 是否單獨(dú)顯示背景顏色
          sortField: 'addAgent',// 排序字段
        },
        {
          title: '達(dá)成率',
          isSort: true,
          backgroundColor: '#fdeeee',
          sortField: 'addAgentRate',
        },
        {
          title: '新增代理人',
          isSort: true,
          sortField: 'preium',
        },
        {
          title: '代理人達(dá)成率',
          isSort: true,
          sortField: 'premiumRate',
        },
      ],
      // 是否需要排序 默認(rèn)不進(jìn)行排序
      isNeedSort: false,
      // 排序序號(hào)
      sortIndex: null,
      // 排序形式 倒敘默認(rèn)倒敘 false為正序
      order: true,
      // 是否顯示更多
      showMore: this.showMoreCom,
    };
  },
  computed: {
    // 控制展開和收起的類名
    controlHeight() {
      if (this.showMore) {
        return 'normalHeight';
      } else {
        return 'controlHeight';
      }
    },
    // 判斷是否展開  這里判斷如果數(shù)大于11條時(shí)就進(jìn)行顯示展開
    showMoreCom() {
      return this.data11.length > 11;
    },
  },
  watch: {
    // 監(jiān)聽是否需要排序 與排序形式相統(tǒng)一 這是比較簡便的方法
    isNeedSort: {
      handler(newV) {
        this.order = newV;
      },
      immediate: true, // 注意 這里要立即進(jìn)行觸發(fā)
    },
  },
  created() {
    this.data11 = data11;
    this.totalData = totalData; // 合計(jì)數(shù)據(jù)
  },
  mounted() {},
  methods: {
    chooseYearMonth(date) {
      this.yearMonth = date;
    },
    // 控制顯示更多
    showMoreFun(boolean) {
      this.showMore = boolean;
    },
    showMoreFun2(boolean) {
      this.showMore = boolean;
    },
    // 點(diǎn)擊排序處理排序箭頭 然后調(diào)用排序方法 需要處理防抖
    needSort(sortField, index) {
      // 排序完成的數(shù)據(jù) 再次點(diǎn)擊排序就恢復(fù)初始值
      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);
    },
    // 開始排序 第一個(gè)參數(shù)是根據(jù)什么排序 第二個(gè)參數(shù)是倒序默認(rèn)值
    startSort(sortField, order) {
      this.data11 = this.data11.sort((a, b) => {
        // 進(jìn)行轉(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;
}
// 表格相關(guān)樣式
table {
  border-collapse: collapse;
  width: 98%;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  // 每一行下面加邊框
  tr {
    border-bottom: 1px solid #f1f1f1;
  }
  .cont {
    height: 40px;
  }
}
// 表頭設(shè)置
.top {
  height: 40px;
  line-height: 40px;
  background: rgb(242, 245, 247);
  .title {
    margin-right: 3px;
  }
  th {
    border-left: 1px solid #e9ebec;
    font-weight: 500;
  }
}
// 合計(jì)一行高亮顯示
.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月份機(jī)構(gòu)詳細(xì)
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%',
  },
];
// 第一行合計(jì)數(shù)據(jù)
export const totalData = [
  {
    comname2: '合計(jì)',
    addAgent: 2864,
    addAgentRate: '29.7%',
    preium: '16,474.7',
    premiumRate: '94.9%',
  },
];

總結(jié) 

到此這篇關(guān)于vue實(shí)現(xiàn)移動(dòng)端table表格的文章就介紹到這了,更多相關(guān)vue移動(dòng)端table表格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 利用Vue Router實(shí)現(xiàn)單頁面應(yīng)用(SPA)的代碼示例

    利用Vue Router實(shí)現(xiàn)單頁面應(yīng)用(SPA)的代碼示例

    在當(dāng)今前端開發(fā)中,單頁面應(yīng)用（SPA）已成為一種主流的開發(fā)模式,它通過在用戶與網(wǎng)頁之間提供更流暢的交互體驗(yàn),來改變傳統(tǒng)多頁面應(yīng)用的思維,本文將詳細(xì)介紹如何利用 Vue.js 中的 Vue Router 來實(shí)現(xiàn)一個(gè)簡單的單頁面應(yīng)用,需要的朋友可以參考下
    2025-01-01
  • 結(jié)合Vue控制字符和字節(jié)的顯示個(gè)數(shù)的示例

    結(jié)合Vue控制字符和字節(jié)的顯示個(gè)數(shù)的示例

    這篇文章主要介紹了結(jié)合Vue控制字符和字節(jié)的顯示個(gè)數(shù)的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-05-05
  • vue調(diào)用微信JSDK 掃一掃，相冊(cè)等需要注意的事項(xiàng)

    vue調(diào)用微信JSDK 掃一掃，相冊(cè)等需要注意的事項(xiàng)

    這篇文章主要介紹了vue調(diào)用微信JSDK 掃一掃，相冊(cè)等需要注意的事項(xiàng)，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
    2021-01-01
  • vue?scss后綴文件background-image路徑錯(cuò)誤的解決

    vue?scss后綴文件background-image路徑錯(cuò)誤的解決

    這篇文章主要介紹了vue?scss后綴文件background-image路徑錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-12-12
  • Vue獲取DOM的幾種方法總結(jié)

    Vue獲取DOM的幾種方法總結(jié)

    這篇文章主要介紹了Vue獲取DOM的幾種方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-10-10
  • 解決vue create 創(chuàng)建項(xiàng)目只有兩個(gè)文件問題

    解決vue create 創(chuàng)建項(xiàng)目只有兩個(gè)文件問題

    這篇文章主要介紹了解決vue create 創(chuàng)建項(xiàng)目只有兩個(gè)文件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-02-02
  • Vue.js中extend選項(xiàng)和delimiters選項(xiàng)的比較

    Vue.js中extend選項(xiàng)和delimiters選項(xiàng)的比較

    這篇文章主要介紹了Vue.js中extend選項(xiàng)和delimiters選項(xiàng)的比較的相關(guān)資料,需要的朋友可以參考下
    2017-07-07

    • 最新評(píng)論