vue element-ui中使用表实现合计指定列求和
时间: 2023-05-10 09:01:13 浏览: 267
vue element-ui中table合计指定列求和实例
在Vue Element-UI中,可以通过使用表格的slot-scope属性和Template语法来实现特定列的求和。
首先,需要在表格中设置特定列的属性,以便于后续的求和操作。例如,可以在表格中通过<el-table-column>标签设置合计列(column1)的名称和属性:
<el-table-column label="Column 1" prop="column1" />
然后,在表格的底部设置一个新行,用于显示合计值。可以通过<el-table-column>标签,设置该行中合计列的名称和id属性:
<el-table-column label="Total" prop="total" v-slot="scope">
{{scope.store.states.data.reduce((prev, curr) => prev + parseFloat(curr.column1), 0).toFixed(2)}}
</el-table-column>
其中,v-slot="scope"用于获取表格数据中的各个值,通过reduce方法对所有合计列的值进行求和。最后,用toFixed(2)方法对求和后的值进行保留两位小数的处理,以得到正确的合计值。
以上就是在Vue Element-UI中使用表实现特定列求和的方法。通过简单的设置和Template语法,可以轻松地对指定列的值进行求和,并展示在表格底部的合计行中。
阅读全文