vue 解决el-table 表体数据发生变化时，未重新渲染问题

已于 2024-01-18 16:46:55 修改
阅读量3.4k 收藏 10
点赞数 14
文章标签： vue.js javascript elementui
于 2024-01-18 16:19:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/goodboxs/article/details/135677470
版权 
效果图

 父组件中数量改变后总数重新计算


子组件完整代码
<template>
  <el-table
    show-summary
    ref="multipleTable"
    v-bind="$props"
    @selection-change="handleSelectionChange"
    @row-click="handleRowClick"
    :summary-method="getSummaries"
    <--这里是关键-->
    :key="certKey"
  >
    <slot/>
  </el-table>
</template>

<script>
export default {
  props: ['data','certKey'],
  data() {
    return {
      selectionData: []
    }
  },

  watch: {
    certKey: {
      handler(val) { 
      }
    },
  },
  methods: {
    // 向父组件共享数据
    handleSelectionChange(val) {
      this.$emit('selection-change', val)
    },
    handleRowClick(row, column, event) {
      // selectionData -- 已选的数据
      let index = this.selectionData.findIndex(item => {
        // 判断已选数组中是否已存在该条数据
        return item.id == row.id
      })
      if (index == -1) {
        // 如果未存在，设置已选状态，并在list中添加这条数据
        this.$refs.multipleTable.toggleRowSelection(row, true); //设置复选框为选中状态
        this.selectionData.push(row)
      } else {
        // 如果已存在，设置未选状态，并在list中删除这条数据
        this.$refs.multipleTable.toggleRowSelection(row, false); //设置复选框为未选状态
        this.selectionData.splice(index, 1)
      }
    },
    //getSummaries()返回的是一个展示的数组 
      getSummaries(param) {
        const { columns, data } = param;
        const sums = []; //声明变量
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = "合计";
            return;
          }
          //计算planQuantity字段的统计
          const values = data.map((item) => Number(item.planQuantity));
          //需要显示和合计纵列
          if ( column.property == "quantity"   ) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
          }
        });
        return sums;
      },

    }
}
</script>

父组件代码 WmsTable 是子组件名 WmsTable 中的数量字段quantity修改时重新计算合计

<template>
  <div class="app-container"> 
    </el-form>
 
    <el-table v-loading="loading" :data="materialList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="id" align="center" prop="id" v-if="true"/>
      <el-table-column label="编号" align="center" prop="materialNo"/>
      <el-table-column label="名称" align="center" prop="materialName"/>
      <el-table-column label="状态" align="center" prop="status"/>
      <el-table-column label="备注" align="center" prop="remark"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['wms:material:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['wms:material:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改物料申请单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="auto">
        <el-form-item label="编号" prop="materialNo">
          <el-input v-model="form.materialNo" placeholder="请输入编号"/>
        </el-form-item>
        <el-form-item label="名称" prop="materialName">
          <el-input v-model="form.materialName" placeholder="请输入名称"/>
        </el-form-item>
        <el-form-item label="总数量" prop="amount">
          <el-input v-model="form.amount" placeholder="请输入总数量"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>

      <div>
        <div class="ops">
          <el-button type="primary" plain="plain" size="small" @click="handleLeaderAdd(2)">添加物料</el-button>
        </div>
        <WmsTable :data="form.details" @selection-change="handleSelectionChange" ref="wmstable" :certKey="certKey">
          <el-table-column type="selection" width="100" align="center"></el-table-column>
          <el-table-column label="物料名" align="center" prop="applyMaterialName"></el-table-column>
          <el-table-column label="物料编号" align="center" prop="applyMaterialNo"></el-table-column>
          <el-table-column label="物料类型" align="center" prop="itemTypeName"></el-table-column>
          <el-table-column label="数量" align="center" prop="quantity" row-key="quantity" width="150">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.planQuantity"  @change="recalculateTotal" placeholder="计划数量" :min="1" size="small"  :max="2147483647"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <a class="red" @click="form.details.splice(scope.$index, 1)">删除</a>
            </template>
          </el-table-column>
        </WmsTable>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible="modalObj.show" :title="modalObj.title" :width="modalObj.width" @close="modalObj.cancel">
      <template v-if="modalObj.component === 'add-item'">
        <item-select ref="item-select" :data="this.form.details"></item-select>
      </template>
      <span slot="footer">
        <el-button v-if="modalObj.cancel" @click="modalObj.cancel">取消</el-button>
        <el-button v-if="modalObj.ok" type="primary" @click="modalObj.ok">确认</el-button>
      </span>
    </el-dialog>
    <!-- 添加 用户对话框 -->
    <el-dialog title="选择负责人" :visible.sync="leaderOpen" width="50%" append-to-body destroy-on-close :key="leaderOpen">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <div class="relatedRoleDIv">
            <el-form :model="roleRelateObj" ref="form" :inline="true" v-show="showSearch" label-width="68px">
              <el-form-item label="姓名" prop="realName">
                <el-input
                  v-model="roleRelateObj.realName"
                  placeholder="请输入姓名"
                  clearable
                  size="small"
                  style="width: 240px"
                  @keyup.enter.native="getListItem"
                />
              </el-form-item>
              <el-form-item label="手机号码" prop="phonenumber">
                <el-input v-model="roleRelateObj.phonenumber" placeholder="请输入手机号码" clearable size="small"
                          style="width: 240px" @keyup.enter.native="getListItem"/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getListItem">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery2">重置</el-button>
              </el-form-item>
            </el-form>
            <el-table :data="userList" style="height: 484px" @selection-change="handleSelectionChange2">
              <template v-if="addType == 1">
                <el-table-column align="center" width="65" :type="addType == 1 ? '' : 'selection'">
                  <template scope="scope">
                    <el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.row)">
                      {{ `` }}
                    </el-radio>
                  </template>
                </el-table-column>
              </template>
              <el-table-column type="selection" width="55" v-if="addType == 2">
              </el-table-column>
              <el-table-column label="物料名"   prop="applyMaterialName"/>
              <el-table-column label="物料编号"  prop="applyMaterialNo" :show-overflow-tooltip="true"/>
              <el-table-column label="物料类型" align="center"  prop="itemTypeName"  />
              <el-table-column label="计量单位" align="center"  prop="unitName"  />
            </el-table>
            <pagination
              v-show="total2 > 0" :total="total2" :page.sync="roleRelateObj.pageNum"
              :limit.sync="roleRelateObj.pageSize"
              @pagination="getListItem"
            />
            <div style="height: 35px;margin-top:40px;display: flex;    justify-content: flex-end;">
              <el-button :loading="buttonLoading" type="primary" @click="submitLeaderForm">确 定</el-button>
              <el-button @click="leaderOpen = false">取 消</el-button>
            </div>
          </div>

        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {listMaterial, getMaterial, delMaterial, addMaterial, updateMaterial} from "@/api/wms/material";
import {randomId} from '@/utils/RandomUtils'
import {listUser} from "../../../api/system/user";
import { listItem, getItem, delItem, addItem, updateItem } from "@/api/wms/item";

export default {
  name: "Material",
  data() {
    return {
      certKey: "",
      radio: "",
      leaderOpen: false,
      userList: [],
      templateSelection2: [],
      checkList: [],
      roleRelateObj: {},
      addType: "",
      total2: 0,
      modalObj: {
        show: false,
        title: '',
        width: '50%',
        component: null,
        model: {},
        ok: () => {
        },
        cancel: () => {
        }
      },
      hasSupplier: false,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 物料申请单表格数据
      materialList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        materialNo: undefined,
        materialName: undefined,
        amount: undefined,
        status: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        id: [
          {required: true, message: "id不能为空", trigger: "blur"}
        ],
        materialNo: [
          {required: true, message: "编号不能为空", trigger: "blur"}
        ],
        materialName: [
          {required: true, message: "名称不能为空", trigger: "blur"}
        ],
        amount: [
          {required: true, message: "总数量不能为空", trigger: "blur"}
        ],
        status: [
          {required: true, message: "1采购中2已完成采购不能为空", trigger: "change"}
        ],
        remark: [
          {required: true, message: "备注不能为空", trigger: "blur"}
        ],
      }
    };
  },
  created() {
    this.getList();
    this.getListItem();
  },
  methods: {
    //数量改变调用方法
    recalculateTotal() {
      this.certKey=!this.certKey;
      console.log(this.certKey)
    },
    //
    handleLeaderAdd(type) {
      this.addType = type;
      this.leaderOpen = true;
      this.getListItem();
    },
    submitLeaderForm() {
      console.log(this.templateSelection2)
      this.form.details=this.templateSelection2;
      this.leaderOpen = false;
    },
    getCurrentRow(row) {
      this.templateSelection = row;
      console.log(row);
      console.log(this.checkList);
      // 获取选中数据 row表示选中这一行的数据，可以从里面提取所需要的值
    },
    handleSelectionChange2(selection) {
      this.templateSelection2 = selection;
    },
    getListItem() {
      listItem().then((response) => {
        this.userList = response.rows;
        this.total2 = response.total;

        console.log(
          this.userList,
        );
      });
    },
    /** 重置按钮操作 */
    resetQuery2() {
      this.resetForm("roleRelateObj");
      this.handleQuery2();
    },
    /** 关联角色弹框重置按钮 */
    handleQuery2() {
      this.getListItem();
    },
    /** 查询物料申请单列表 */
    getList() {
      this.loading = true;
      listMaterial(this.queryParams).then(response => {
        this.materialList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        materialNo: 'SQ-' + randomId(),
        id: undefined,
        materialName: undefined,
        amount: undefined,
        status: undefined,
        delFlag: undefined,
        remark: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加物料申请单";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.loading = true;
      this.reset();
      const id = row.id || this.ids
      getMaterial(id).then(response => {
        this.loading = false;
        this.form = response.data;
        this.open = true;
        this.title = "修改物料申请单";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateMaterial(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addMaterial(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除物料申请单编号为"' + ids + '"的数据项？').then(() => {
        this.loading = true;
        return delMaterial(ids);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('wms/material/export', {
        ...this.queryParams
      }, `material_${new Date().getTime()}.xlsx`)
    },


    confirmSelectItem() {
      const value = this.$refs['item-select'].getRightList()
      this.form.details = value.map(it => {
        return {
          id: it.id,
          prod: it,
          planQuantity: null,
          realQuantity: null,
          place: [],
          receiptOrderStatus: 0,
          delFlag: 0
        }
      })
      this.closeModal()
    },
    closeModal() {
      this.modalObj.show = false
    },
    showAddItem() {
      try {
        this.$refs['item-select'].initDetailsList(this.form.details)
      } catch (err) {

      }
      const ok = () => this.confirmSelectItem()
      const cancel = () => this.closeModal()
      this.modalObj = {
        show: true,
        title: '添加物料',
        width: '50%',
        component: 'add-item',
        model: {},
        ok,
        cancel
      }
    },

  }
};
</script>

帅气的小伙
关注
element-ui 表格 修改后, 表格里面的数据不实时更新问题
github_37759996的博客
05-14 3843
element-ui 表格 修改后 表格里面的数据后 页面不实时更新问题 完美解 想要达到的效果：点击"更多"后，"更多"隐藏，删除和补仓显示；（有时间可全部看完，没时间直接看做法6/7） 尝试用的方法：自己用 this.show、在百度上找的方法 set 都没能成功 提示：最下面有代码demo 页面初始化： 目标效果 做法1： 给"更多"绑定一个 v-show=‘show’ 把 this.show 设置为true ，点击"更多"按钮后 在点击事件里面把this.show 设置为false； 结果1： 未成
vue中数据已经改变了，但是table里面内容没更新渲染
qq_45067263的博客
05-21 1853
给table或者el-table标签上添加一个动态key值，只要数据发生改变，key值变动一下即可。标签上： :key=“timeStamp”更新数据：this.timeStamp++初始data：timeStamp:0,这样每次更新数据，都会使表格渲染。
深入探讨 ElementUI 动态渲染 el-table
最新发布
繁依Fanyi的博客
08-15 1775
在某些复杂场景中，我们可能需要在表格中嵌套其他表格或自定义列内容。我们可以通过实现这一需求：-- 自定义列内容 --> < div v-if = " column.custom " > {{ customRender(scope.row, column.prop) }} </ div > <!
ElementUI - 表格组件（el-table）数据发生改变时视图不刷新渲染问题解决方案
热门推荐
王佳斌
06-18 1万+
前言 mqtt 做实时数据传输页面时，发现 数据变了但视图没变。 el-table 表格组件，每次只能监听整个 row 的变化，仅是 row 中某个属性变化无法追踪（需要重新给 table 中的某一行赋值）。 解决方案 vue.set() API（官方文档）：https://cn.vuejs.org/v2/api/#Vue-set 使用 vue.$set() 方法，触发视图更新即可。 /* * target: 要更改的数据源(可以是对象或者数组) * key：要更改的具体数据 * value ：重
vue组件el-table :data数据更新视图不自动更新 解决办法
weixin_45671983的博客
05-22 556
解决Element的el-table组件更改数据后不自动渲染界面问题
解决el-table 表体数据发生变化时，未重新渲染问题｜页面不更新问题|表格数据错乱
小夏同学呀
12-06 1215
【代码】解决el-table 表体数据发生变化时，未重新渲染问题｜页面不更新问题|表格数据错乱。
每天bug---vue 解决el-table 表格数据发生变化了，页面未重新渲染问题
m0_70190404的博客
04-20 4002
vue 解决el-table 表格数据发生变化了，页面未重新渲染问题
【前端踩坑】elementUI表格el-table数据排序/更新后，不重新渲染（页面数据不更新）
weixin_44649384的博客
12-30 5135
查看element文档，数据需要设置key，但是用el-table提供的row-key不太好用。这里预测是，前后数据内容一致，dom不更新，可能是为了提升页面性能。给table增加一个随机key，每次重新赋值tableData的时候，也传递随机key值，这样页面就可以重新渲染el-table了。前端页面选择重新排序，重新向后端请求数据，排序规则改变但数据内容不不变，表格数据不重新渲染。
element UI 中的Table组件tableData数据变化后，表格不会重新渲染怎么办
贝加尔湖畔的博客
12-11 8096
赋数组中对象的单个值,数值变化,但不会渲染到页面. 笨方法,重新赋给整个数组, for(var i = 0;i < this.conPaymentList.length;i++){ this.conPaymentList[i].payMoney = 1; } let array = [];//为了重新渲染加载付款信息,算出付款金额(与合同单价,合同金额无关) for ...
elementUI表格el-table数据排序/更新后，不重新渲染（页面数据不更新）
zzjbj910的博客
05-16 1534
查看element文档，数据需要设置key，但是用el-table提供的row-key不太好用。这里预测是，前后数据内容一致，dom不更新，可能是为了提升页面性能。给table增加一个随机key，每次重新赋值tableData的时候，也传递随机key值，这样页面就可以重新渲染el-table了。前端页面选择重新排序，重新向后端请求数据，排序规则改变但数据内容不不变，表格数据不重新渲染。
vue el-table实现自定义表头
10-15
el-table-column组件用于定义表格的列数据，而slot="header"则是在el-table-column内部使用，用于定义该列的表头。然后通过slot-scope来获取当前列的具体信息，并渲染对应的按钮或其他组件。 此外，示例代码还展示...
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
在Vue2.0结合ElementUI2.0的项目开发中，常常会遇到表格列数不固定，需要根据数据动态渲染的情况。本篇文章将详细介绍如何实现`el-table`的循环动态列渲染。 首先，ElementUI的`el-table`组件通常通过`<el-table-...
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
在使用VUE2.0结合ElementUI2.0框架开发过程中，经常会遇到需要让表格控件自适应浏览器窗口高度的需求，同时保持表头固定，并在内容超出时显示滚动条。ElementUI为el-table元素提供了直接设置高度（height）属性的...
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
10-17
el-table 是Element UI中用于展示表格数据的组件，它支持数据的展示、排序、筛选等功能。为了使用 el-table 组件，我们首先需要确保项目中已经安装了Element UI，并在Vue组件中引入对应的模块。 el-tooltip 组件则...
vue2.0解决el-table无限滚动解决数据量大前端界面渲染耗时或卡顿问题
weixin_38644630的博客
11-08 4378
解决el-table渲染数据量大导致前端界面渲染卡顿或耗时较长问题
Vue中 数据改变但未渲染的问题，页面中并没有自动更新，但是在控制台可以打印出来，常见解决方法
liumimi973的博客
02-03 9036
打印出来值，赋值未渲染
【vue2】el-table 从接口获取数据改变了，但是页面却没有正常渲染
qq_44971635的博客
06-05 4279
el-table 从接口获取数据改变了，但是页面却没有正常渲染
vue修改数据页面不重新渲染，【绝对干货
2401_84183545的博客
04-07 1327
打开全栈工匠技能包-1小时轻松掌握SSR两小时精通jq+bs插件开发生产环境下如歌部署Node.js网易内部VUE自定义插件库NPM集成谁说前端不用懂安全，XSS跨站脚本的危害webpack的loader到底是什么样的？两小时带你写一个自己loader。
element嵌套表格 对展开的表格的数据进行编辑 编辑完成后 刷新页面 数据不能正常渲染（还是显示之前的数据）
你的阿迁
04-14 340
对展开的表格的数据进行编辑 编辑完成后 刷新页面 数据不能正常渲染
springboot+vue 实现el-table显示数据
06-02
好的，这个问题我可以回答。首先，我们需要在后端使用Spring Boot进行数据的处理和接口的实现，然后在前端使用Vue框架进行页面的展示和数据的渲染。具体实现步骤如下： 1. 后端实现 首先，在后端我们需要使用Spring Boot框架进行数据的处理和接口的实现。我们可以使用MyBatis或者Hibernate等ORM框架来进行数据库的操作。在接口实现中，我们需要将查询到的数据以JSON格式返回给前端。例如： ```java @RestController @RequestMapping("/api") public class UserController { @Autowired private UserService userService; @GetMapping("/users") public List<User> getUsers() { return userService.getUsers(); } } ``` 其中，`userService.getUsers()`方法返回的是一个List<User>类型的数据，即查询到的所有用户数据。 2. 前端实现 接下来，在前端我们需要使用Vue框架进行页面的展示和数据的渲染。我们可以使用element-ui组件库中的el-table组件来展示数据。具体实现步骤如下： (1) 安装element-ui组件库 使用npm命令安装element-ui组件库： ``` npm install element-ui --save ``` (2) 在Vue组件中引入el-table组件 在Vue组件中引入el-table组件，并使用axios库从后端接口获取数据。例如： ```vue <template> <div> <el-table :data="users"> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> </div> </template> <script> import axios from 'axios'; export default { data() { return { users: [] } }, mounted() { axios.get('/api/users').then(response => { this.users = response.data; }); } } </script> ``` 其中，`:data="users"`绑定了数据源，`el-table-column`定义了要展示的列。在`mounted()`方法中使用axios库从后端接口获取数据，并将数据赋值给`users`变量。 至此，我们就完成了基于Spring Boot和Vue的el-table数据展示功能的实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值