＜el-table＞合并行、合并列、固定表头、固定前两列、动态渲染右边列、行内编辑

最新推荐文章于 2024-09-25 11:40:45 发布
最新推荐文章于 2024-09-25 11:40:45 发布
阅读量1.9k 收藏 22
点赞数 25
分类专栏： vue 文章标签： javascript vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43548684/article/details/134883898
版权

合并行、合并列、固定表头、固定前两列、动态渲染右边列、行内编辑

一、案例图片说明

1、技术栈：vue2 + elementUI
2、需求：表头固定、表头嵌套、左侧两列固定、左侧第一列合并单元行、右侧列动态加载、右侧单元格行内编辑
3、数据双向绑定：可以【保存】，此处代码就不演示了，保存右侧31列所有数据
4、优化：动态加载列过多，渲染时间长达1分钟，需优化渲染时间

image.png

二、.vue单文件：代码说明

  1. 代码拆解为<template>、<script>、<style>
  2. 每个拆解，除了代码中的注释外，代码下方有对应文字解释
  3. 建议对着数据data来看html，增加理解
  4. 建议查看<el-table>的文档，配合使用更好

1、<template>

<template>
  <!-- height - 作用：固定表头，只有写了height才可以固定表头，本案例前3行都是表头 -->
  <el-table
    border
    style="width: 100%;"
    v-loading="loading"
    :data="detailData.timetableBookVO"
    :span-method="objectSpanMethod"
    header-cell-class-name="table-header"
    row-class-name="table-row-low"
    height="80vh"
  >
    <!-- 左边两列，这两列固定在左边 -->
    <!-- fixed - 写着一个就可以了，书架这一列就已经固定了，不管书架这一列下面还有几列 -->
    <el-table-column
      label="书架"
      width="200"
      fixed="left"
    >
      <el-table-column
        label="书架说明"
      >
        <el-table-column
          align="center"
          prop="bookshelfName"
          label="书架"
          width="100"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="bookName"
          label="书名"
          width="100"
        ></el-table-column>
      </el-table-column>
    </el-table-column>

    <!-- 右侧动态加载列 -->
    <!-- 月份 -->
    <el-table-column
      :label="detailData.bookshelfNameTitle"
    >
      <!-- 清扫说明 -->
      <el-table-column
        :label="detailData.bookshelfContent"
      >
        <!-- 右侧动态列，此处列为30天 -->
        <el-table-column
          v-for="date in detailData.dayOfMonth"
          width="100"
          align="center"
          :key="date"
          :label="`${date}`"
        >
          <!-- 行内编辑 -->
          <template slot-scope="scope">
            <!-- 使用<select>代替<el-select>能大大加快渲染速度 -->
            <!-- 若还想加快渲染速度，可以将v-model改为:value，select再加一个change事件，change的时候再更改detailData里面对应的这条数据 -->
            <select
              class="el-select el-select--small" 
              v-model="scope.row.timetableDetailVO[fullDate(date)].isCleanedId"
            >
              <option value="null">请选择</option>
              <option v-for="item in isCleanedList" :key="item.id" :value="item.id">{{ item.name }}</option>
            </select>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>
  1. 使用的是<el-table>组件
  2. <el-table height="80vh">height的作用：固定表头，前三行都是表头
  3. 使用<select>代替<el-select>能大大加快渲染速度
  4. 本案例使用的是v-model来进行行内编辑的数据绑定，若还想提升渲染速度，可以试试:value加change事件手动进行数据绑定，个人实验速度快不了3秒，可以试试

2、<script>

export default {
  data() {
    return {
      detailData: {
        id: '',
        bookshelfNameTitle: '',
        bookshelfContent: '',
        dayOfMonth: '',
        timetableDate: '',
        timetableBookVO: []
      },
      isCleanedList: [
        { id: 0, name: '未扫' },
        { id: 1, name: '已扫' }
      ]
    }
  },
  mounted() {
    this.queryDetail()
  },
  methods: {
    /**
     * 请求数据
     * 此处直接使用假数据，本方法用于向后端请求数据
     */
    queryDetail() {
      this.detailData = {
        id: 3,
        bookshelfNameTitle: '2023年12月清扫日记',
        bookshelfContent: '当前月每本书清扫应大于等于20天，即为清扫任务达标',
        // 该月有多少天，用于渲染多少列 - 2023.12有31天，故右侧动态渲染31列
        dayOfMonth: 31,
        // 该月，用于匹配每本书对应那天的月份
        timetableDate: '2024-01',
        // 书 - 多少行，就多少条数据
        timetableBookVO: [
          {
            bookshelfId: 1,
            bookshelfName: '书架1',
            bookId: 11,
            bookName: '书架1书籍1',
            timetableDetailVO: {
              '2024-01-01': { isCleanedId: 0 },
              '2024-01-02': { isCleanedId: 0 },
              '2024-01-03': { isCleanedId: 0 },
              '2024-01-04': { isCleanedId: 0 },
              '2024-01-05': { isCleanedId: 1 },
              '2024-01-06': { isCleanedId: 1 },
              '2024-01-07': { isCleanedId: null },
              '2024-01-08': { isCleanedId: null },
              '2024-01-09': { isCleanedId: null },
              '2024-01-10': { isCleanedId: null },
              '2024-01-11': { isCleanedId: null },
              '2024-01-12': { isCleanedId: null },
              '2024-01-13': { isCleanedId: null },
              '2024-01-14': { isCleanedId: null },
              '2024-01-15': { isCleanedId: null },
              '2024-01-16': { isCleanedId: null },
              '2024-01-17': { isCleanedId: null },
              '2024-01-18': { isCleanedId: null },
              '2024-01-19': { isCleanedId: null },
              '2024-01-20': { isCleanedId: null },
              '2024-01-21': { isCleanedId: null },
              '2024-01-22': { isCleanedId: null },
              '2024-01-23': { isCleanedId: null },
              '2024-01-24': { isCleanedId: null },
              '2024-01-25': { isCleanedId: null },
              '2024-01-26': { isCleanedId: null },
              '2024-01-27': { isCleanedId: null },
              '2024-01-28': { isCleanedId: null },
              '2024-01-29': { isCleanedId: null },
              '2024-01-30': { isCleanedId: null },
              '2024-01-31': { isCleanedId: null },
            }
          },
          {
            bookshelfId: 1,
            bookshelfName: '书架1',
            bookId: 12,
            bookName: '书架1书籍2',
            timetableDetailVO: {
              '2024-01-01': { isCleanedId: 0 },
              '2024-01-02': { isCleanedId: 0 },
              '2024-01-03': { isCleanedId: 0 },
              '2024-01-04': { isCleanedId: 0 },
              '2024-01-05': { isCleanedId: 1 },
              '2024-01-06': { isCleanedId: 1 },
              '2024-01-07': { isCleanedId: null },
              '2024-01-08': { isCleanedId: null },
              '2024-01-09': { isCleanedId: null },
              '2024-01-10': { isCleanedId: null },
              '2024-01-11': { isCleanedId: null },
              '2024-01-12': { isCleanedId: null },
              '2024-01-13': { isCleanedId: null },
              '2024-01-14': { isCleanedId: null },
              '2024-01-15': { isCleanedId: null },
              '2024-01-16': { isCleanedId: null },
              '2024-01-17': { isCleanedId: null },
              '2024-01-18': { isCleanedId: null },
              '2024-01-19': { isCleanedId: null },
              '2024-01-20': { isCleanedId: null },
              '2024-01-21': { isCleanedId: null },
              '2024-01-22': { isCleanedId: null },
              '2024-01-23': { isCleanedId: null },
              '2024-01-24': { isCleanedId: null },
              '2024-01-25': { isCleanedId: null },
              '2024-01-26': { isCleanedId: null },
              '2024-01-27': { isCleanedId: null },
              '2024-01-28': { isCleanedId: null },
              '2024-01-29': { isCleanedId: null },
              '2024-01-30': { isCleanedId: null },
              '2024-01-31': { isCleanedId: null },
            }
          },
          {
            bookshelfId: 1,
            bookshelfName: '书架1',
            bookId: 13,
            bookName: '书架1书籍3',
            timetableDetailVO: {
              '2024-01-01': { isCleanedId: 0 },
              '2024-01-02': { isCleanedId: 0 },
              '2024-01-03': { isCleanedId: 0 },
              '2024-01-04': { isCleanedId: 0 },
              '2024-01-05': { isCleanedId: 1 },
              '2024-01-06': { isCleanedId: 1 },
              '2024-01-07': { isCleanedId: null },
              '2024-01-08': { isCleanedId: null },
              '2024-01-09': { isCleanedId: null },
              '2024-01-10': { isCleanedId: null },
              '2024-01-11': { isCleanedId: null },
              '2024-01-12': { isCleanedId: null },
              '2024-01-13': { isCleanedId: null },
              '2024-01-14': { isCleanedId: null },
              '2024-01-15': { isCleanedId: null },
              '2024-01-16': { isCleanedId: null },
              '2024-01-17': { isCleanedId: null },
              '2024-01-18': { isCleanedId: null },
              '2024-01-19': { isCleanedId: null },
              '2024-01-20': { isCleanedId: null },
              '2024-01-21': { isCleanedId: null },
              '2024-01-22': { isCleanedId: null },
              '2024-01-23': { isCleanedId: null },
              '2024-01-24': { isCleanedId: null },
              '2024-01-25': { isCleanedId: null },
              '2024-01-26': { isCleanedId: null },
              '2024-01-27': { isCleanedId: null },
              '2024-01-28': { isCleanedId: null },
              '2024-01-29': { isCleanedId: null },
              '2024-01-30': { isCleanedId: null },
              '2024-01-31': { isCleanedId: null },
            }
          },
          {
            bookshelfId: 2,
            bookshelfName: '书架2',
            bookId: 21,
            bookName: '书架2书籍1',
            timetableDetailVO: {
              '2024-01-01': { isCleanedId: 0 },
              '2024-01-02': { isCleanedId: 0 },
              '2024-01-03': { isCleanedId: 0 },
              '2024-01-04': { isCleanedId: 0 },
              '2024-01-05': { isCleanedId: 1 },
              '2024-01-06': { isCleanedId: 1 },
              '2024-01-07': { isCleanedId: null },
              '2024-01-08': { isCleanedId: null },
              '2024-01-09': { isCleanedId: null },
              '2024-01-10': { isCleanedId: null },
              '2024-01-11': { isCleanedId: null },
              '2024-01-12': { isCleanedId: null },
              '2024-01-13': { isCleanedId: null },
              '2024-01-14': { isCleanedId: null },
              '2024-01-15': { isCleanedId: null },
              '2024-01-16': { isCleanedId: null },
              '2024-01-17': { isCleanedId: null },
              '2024-01-18': { isCleanedId: null },
              '2024-01-19': { isCleanedId: null },
              '2024-01-20': { isCleanedId: null },
              '2024-01-21': { isCleanedId: null },
              '2024-01-22': { isCleanedId: null },
              '2024-01-23': { isCleanedId: null },
              '2024-01-24': { isCleanedId: null },
              '2024-01-25': { isCleanedId: null },
              '2024-01-26': { isCleanedId: null },
              '2024-01-27': { isCleanedId: null },
              '2024-01-28': { isCleanedId: null },
              '2024-01-29': { isCleanedId: null },
              '2024-01-30': { isCleanedId: null },
              '2024-01-31': { isCleanedId: null },
            }
          },
          {
            bookshelfId: 2,
            bookshelfName: '书架2',
            bookId: 22,
            bookName: '书架2书籍2',
            timetableDetailVO: {
              '2024-01-01': { isCleanedId: 0 },
              '2024-01-02': { isCleanedId: 0 },
              '2024-01-03': { isCleanedId: 0 },
              '2024-01-04': { isCleanedId: 0 },
              '2024-01-05': { isCleanedId: 1 },
              '2024-01-06': { isCleanedId: 1 },
              '2024-01-07': { isCleanedId: null },
              '2024-01-08': { isCleanedId: null },
              '2024-01-09': { isCleanedId: null },
              '2024-01-10': { isCleanedId: null },
              '2024-01-11': { isCleanedId: null },
              '2024-01-12': { isCleanedId: null },
              '2024-01-13': { isCleanedId: null },
              '2024-01-14': { isCleanedId: null },
              '2024-01-15': { isCleanedId: null },
              '2024-01-16': { isCleanedId: null },
              '2024-01-17': { isCleanedId: null },
              '2024-01-18': { isCleanedId: null },
              '2024-01-19': { isCleanedId: null },
              '2024-01-20': { isCleanedId: null },
              '2024-01-21': { isCleanedId: null },
              '2024-01-22': { isCleanedId: null },
              '2024-01-23': { isCleanedId: null },
              '2024-01-24': { isCleanedId: null },
              '2024-01-25': { isCleanedId: null },
              '2024-01-26': { isCleanedId: null },
              '2024-01-27': { isCleanedId: null },
              '2024-01-28': { isCleanedId: null },
              '2024-01-29': { isCleanedId: null },
              '2024-01-30': { isCleanedId: null },
              '2024-01-31': { isCleanedId: null },
            }
          },
          {
            bookshelfId: 3,
            bookshelfName: '书架3',
            bookId: 31,
            bookName: '书架3书籍1',
            timetableDetailVO: {
              '2024-01-01': { isCleanedId: 0 },
              '2024-01-02': { isCleanedId: 0 },
              '2024-01-03': { isCleanedId: 0 },
              '2024-01-04': { isCleanedId: 0 },
              '2024-01-05': { isCleanedId: 1 },
              '2024-01-06': { isCleanedId: 1 },
              '2024-01-07': { isCleanedId: null },
              '2024-01-08': { isCleanedId: null },
              '2024-01-09': { isCleanedId: null },
              '2024-01-10': { isCleanedId: null },
              '2024-01-11': { isCleanedId: null },
              '2024-01-12': { isCleanedId: null },
              '2024-01-13': { isCleanedId: null },
              '2024-01-14': { isCleanedId: null },
              '2024-01-15': { isCleanedId: null },
              '2024-01-16': { isCleanedId: null },
              '2024-01-17': { isCleanedId: null },
              '2024-01-18': { isCleanedId: null },
              '2024-01-19': { isCleanedId: null },
              '2024-01-20': { isCleanedId: null },
              '2024-01-21': { isCleanedId: null },
              '2024-01-22': { isCleanedId: null },
              '2024-01-23': { isCleanedId: null },
              '2024-01-24': { isCleanedId: null },
              '2024-01-25': { isCleanedId: null },
              '2024-01-26': { isCleanedId: null },
              '2024-01-27': { isCleanedId: null },
              '2024-01-28': { isCleanedId: null },
              '2024-01-29': { isCleanedId: null },
              '2024-01-30': { isCleanedId: null },
              '2024-01-31': { isCleanedId: null },
            }
          },
        ]
      }
    },
    /**
     * 日期匹配 - 全日期
     */
    fullDate(date) {
      return `${this.detailData.timetableDate}-${date > 9 ? date : '0' + date}`
    },
    /**
     * 合并行 - 书架
     */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const { timetableBookVO } = this.detailData
      const listMap = {}
      timetableBookVO.length && timetableBookVO.forEach((item, index) => {
        if (listMap[item.bookshelfId]) {
          // len - 用于书架合并多少行
          listMap[item.bookshelfId].len += 1
          // firstIndex - 用于同一个书架，最开始的书架进行合并，例如书架1，有3本书，则第一本书的书架1合并3行，后面都为0即可
          listMap[item.bookshelfId].firstIndex = listMap[item.bookshelfId].firstIndex < index ? listMap[item.bookshelfId].firstIndex : index
        } else {
          listMap[item.bookshelfId] = { len: 1, firstIndex: index }
        }
      })
      if (columnIndex == 0) {
        if (listMap[row.bookshelfId] && listMap[row.bookshelfId].firstIndex == rowIndex) {
          return { rowspan: listMap[row.bookshelfId].len, colspan: 1 }
        } else {
          return { rowspan: 0, colspan: 0 }
        }
      }
    }
  }
}
  1. 本案例：假数据代替后端请求
  2. 合并行用于表身的书架列，同一个书架可能拥有多本书，那同一个书架则合并行

3、<style>

.el-select--small {
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  color: #606266;
  word-break: break-all;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  background-color: #FFFFFF;
  width: 100%;
}
  1. 此处为.scss代码，作用：对原生select选择框的一个样式优化
  2. 根据个人需求进行更改
小林.js
关注
专栏目录
html table 固定表头和列
09-21
html table 固定表头和列，下载后，运行index.html页面即可看到效果。
Element行内编辑
单飞吧的博客
09-06 568
布局 点击行方法@row-click=“rowShowInput” 使用selectData 控制 <el-table @row-click="rowShowInput" style="margin-top: 10px" height="500px" :data="tableData2" border stripe size="small" :header-cell-style="{background:'#ECF5FF',color:'#606266',fontWeight:'bold',alig
解决el-table前后列固定 中间变化导致行错位问题+固定列遮挡滚动条问题
最新发布
m0_71207979的博客
09-25 193
问题：当中间的月份变化时，table的 的样式会混乱 变成下面的样子。本人前端菜鸟，本文章为问题记录，大家谨慎参考，欢迎大家在评论区讨论。实现功能：表格两边固定，中间随着 年月 按钮 切换而变化。重新计算表格的布局，以确保表格正确渲染并适应新的数据。2.重写table样式重构，改变样式权重。
el-table中合并表头的同时，合并列固定（解决办法）+表头合并受fixed的影响合并不成功（解决办法）
weixin_38345306的博客
09-07 2253
el-table中合并表头的同时，合并列固定（解决办法）+表头合并受fixed的影响合并不成功（解决办法）
table固定表头和列头
12-15
固定表头和列头
table固定表头和第一列
weixin_30788619的博客
09-15 844
$("#tableDiv").scroll(function(){//给table外面的div滚动事件绑定一个函数 var left=$("#tableDiv").scrollLeft();//获取滚动的距离 var top=$("#tableDiv").scrollTop();//获取滚动的距离 var trs=$("#tableDiv table tr");//获取表格的所有tr trs...
element-ui渲染el-table表格小技巧
qq_34261347的博客
10-12 3976
element-ui中table的使用 当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。 相当于是要枚举出所有需要展示的参数，这种情况在参数比较少的情况下是比较方便的，但是在有很多数据或者参数不确定的情况下，这种枚举的方式就不太适合了 常规用法 <template> <el-table :data="tableData"
vue+element-ui 实现可编辑表格、动态渲染表头和表格数据、列向数据合计（每行末尾合计功能）
huihuiliu_的博客
11-18 6881
vue + element 实现可编辑表格、动态渲染表头表格数据、列向数据合计（每行末尾合计） 1，首先得在项目中集成element-ui 安装，注册，具体参照 element-ui的集成 2，我这里使用的vue-cli脚手架搭建的项目，可网上搜索相关知识 3，我的需求，做一个比赛项目打分表，评委可以实现在线打分，表头和表格数据首先都是动态获取后台数据进行渲染，这里我先写成假数据以供大家参考...
vue在el-table内结合v-contextmenu对行添加鼠标右键自定义菜单
weixin_44403402的博客
07-14 5386
vue在el-table内结合v-contextmenu对行添加鼠标右键自定义菜单 最近工作上要求在el-table的表格内屏蔽浏览器原生右键菜单，更换为自定义的菜单。期间走了不少弯路，也查阅了不少博客资料，最后终于做出来一个自己觉得还说的过去的比较像浏览器原生的自定义菜单（此处滑稽）。 首先，右击表格行可以弹出自定义菜单，选择下列菜单项可以给v-contextmenu-item添加@click方法，如下图 至此就可以显示了。但是我遇到了一个问题，就是我是利用div将整个表格包裹起来的，右击空白处同样会弹
element el-table树形结构怎么将第一列相同数据合并到一个单元格
09-14
在Element UI的el-table组件中，如果想要合并第一列相同的数据，可以借助`render-header`属性以及自定义的`row-class-name`来实现。这里有一个简单的步骤说明： 1. 首先，在表头渲染上设置`render-header`，它是一...
vue3 - element plus表格内实现行内直接编辑输入框、单选/多选框、复选框等数据并且自动更新，在表格组件每行里嵌套可直接修改编辑的输入框，失去焦点时自动更新数据（提供源码，一键复制即用）
高级前端工程师
01-15 4566
vue3，element plus，表格实现可编辑单元格，表格单元格内嵌套输入框怎么直接编辑，table单元格可编辑实现方法详解，双击修改，el-table双击修改单元格的值，Element plus表格双击可编辑，双击编辑el-table的单元格，单元格里嵌套输入框怎么编辑，嵌套选择器如何修改后更新表格，table表格行内插入的Input输入框/select选择器怎么点击修改更新，ElementPlus编辑表格数据(指定行变为input)，点击表格数值后出现编辑样式，点击后出现输入框，表格动态编辑，点击编
锁定表头和固定列(Fixed table head and columns)
05-17
经典案例( 锁定表头和固定列(Fixed table head and columns)
table固定表头、固定列
RRRRRDong的博客
07-17 8486
最近在做一些报表，使用原生table画的，记录一下固定表头的一些方法。 使用position:sticky来固定表头 html: <div id="common-table"> <table id="table-container" cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th>1</th>
element表格的行内编辑
qq_38181746的博客
11-05 679
element表格的行内编辑 在data中定义
vue项目中table表格固定表头和首尾列
热门推荐
梨城毒妃的博客
10-22 1万+
在html中实现table表格固定表头和首尾列的方法和文章很多，本文就不再赘述。 本文主要介绍vue项目中三种情景下实现table表格固定表头和首尾列 情景一：vue+element 只要在el-table元素中定义了height属性，即可实现固定表头的表格 通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。 固定列需要使用fixed属性，它接受 Boolean 值或者leftright，表示左边固定还是右边固定。 <template&
bootstrap table 怎么实现前两列固定冻结？
03-16 731
$("#Table").bootstrapTable('destroy').bootstrapTable({ pagination: true,//分页 minimumCountColumns: 4,//设置最小列数 paginationLoop: true, striped: true,//是否显示行间隔色 ...
table组件的固定列和表头
arvin_top的博客
12-10 591
最近写了个table组件，主要实现了固定列和表头 具体参考了这篇文章：https://segmentfault.com/a/1190000012568782 对table的优化讲得挺详细，后续我再自己总结一下。...
前端页面Table CSS实现固定表头表首行和固定列拖动固定
小熊猫
05-11 3224
sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置。要注意的是当position : sticky应用于table，只能作用于和，并且一定要定义目标位置 left / right / top / bottom 才会出现固定效果！为了让表格呈现滚动效果，必须设定table-layout:fixed 并且给与表格宽度。
固定table表头
曾经的奶粉的博客
05-30 731
项目中需要在滚屏中悬浮TABLE表头title，在网上找到一个不错的例子，思路为克隆当前TABLE的表头悬浮在滚动条容器顶端，开发中发现时常会出现表头与数据行错位的情况，故略作改进，即克隆TABLE表头和第一行数据（实际是table的第二行），并使用css的opacity，使第一行数据透明不可见，如此便解决了这个问题，不受table表列的宽度影响。 代码如下：<html> <head> <
<el-table><el-table-column></el-table-column><el-table-column></el-table-column></el-table>控制其中一列<el-table-column>显示和隐藏怎么写
03-27
要控制<el-table>中的某一列<el-table-column>的显示和隐藏，你可以使用<el-table-column>的"show-overflow-tooltip"属性来实现。当该属性设置为true时，列内容超出宽度时会显示tooltip，设置为false时则隐藏列内容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值