antd vue表格可编辑单元格以及求和实现方式

antd vue表格可编辑单元格以及求和实现

1、参照官网根据自己需要添加可编辑单元格组件

新建EditableCell.vue

2、需要的页面引入

注意点：合计行是直接由下面几行汇总求和的，不需要设置为可编辑的，如果设置为可编辑，可编辑单元格无法动态获取数据变化，所以无法实时更新到页面上

antd vue 表格可编辑问题

template:

                                          {{text}}               

在tableColumns中：

const tableColumns = [     { title: "编号", dataIndex:"stdId",       scopedSlots: { customRender: "stdId" }} ];

还有一个问题就是点击单元格会出现一个border，取消掉的css样式：

[contenteditable]:focus{outline: none;}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。