Element ui表格合计只显示某列相加,不显示某列相加

1.Element ui表格合计只显示某列相加
先去element ui官网拷贝好对应代码,然后把这里修改成如下图’ '号里面为表格的标签对里面的prop值
在这里插入图片描述
2.Element ui表格合计不显示显示某列相加
链接:https://blog.csdn.net/weixin_46476136/article/details/122446456?ops_request_misc=&request_id=&biz_id=102&utm_term=element%20%E8%AE%BE%E7%BD%AE%E5%BD%93%E5%89%8D%E5%88%97%E4%B8%8D%E7%9B%B8%E5%8A%A0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduweb~default-0-122446456.142v39pc_rank_v37&spm=1018.2226.3001.4187
————————————————
版权声明:本文为CSDN博主「全栈攻城狮小方」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_29820687/article/details/126163394

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element UI 表格组件提供了 `column` 属性来设置表格的列信息,可以通过该属性来隐藏/显示列和排序列。 首先,设置表格的列信息,例如: ```html <el-table :data="tableData" :column="columns"></el-table> ``` 其,`columns` 是一个数组,包含了每一列的配置信息,例如: ```js columns: [ { label: '姓名', prop: 'name', sortable: true, show: true }, { label: '年龄', prop: 'age', sortable: true, show: true }, { label: '性别', prop: 'gender', sortable: false, show: true } ] ``` 上面的配置,每一列都有一个 `show` 属性,用于表示该列是否显示。初始情况下,所有列都是显示的。 接下来,我们可以通过一个复选框列表来控制列的显示/隐藏,例如: ```html <el-checkbox-group v-model="showColumns"> <el-checkbox label="name">姓名</el-checkbox> <el-checkbox label="age">年龄</el-checkbox> <el-checkbox label="gender">性别</el-checkbox> </el-checkbox-group> ``` 其,`showColumns` 是一个数组,包含了所有可选列的标识符。当某个复选框被选时,将对应列的 `show` 属性设置为 `true`,否则设置为 `false`,例如: ```js watch: { showColumns: function(val) { this.columns.forEach(column => { column.show = val.indexOf(column.prop) !== -1 }) } } ``` 最后,我们可以通过 `sortable` 属性来设置是否允许用户对表格进行排序。当 `sortable` 为 `true` 时,用户可以点击表头来对该列进行升序/降序排序,例如: ```js columns: [ { label: '姓名', prop: 'name', sortable: true, show: true }, // ... ] ``` 这样,我们就实现了表格的隐藏显示列和列排序功能。完整的代码示例如下: ```html <template> <div> <el-checkbox-group v-model="showColumns"> <el-checkbox label="name">姓名</el-checkbox> <el-checkbox label="age">年龄</el-checkbox> <el-checkbox label="gender">性别</el-checkbox> </el-checkbox-group> <el-table :data="tableData" :column="columns"></el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' } ], columns: [ { label: '姓名', prop: 'name', sortable: true, show: true }, { label: '年龄', prop: 'age', sortable: true, show: true }, { label: '性别', prop: 'gender', sortable: false, show: true } ], showColumns: ['name', 'age', 'gender'] } }, watch: { showColumns: function(val) { this.columns.forEach(column => { column.show = val.indexOf(column.prop) !== -1 }) } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值