您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍“antd vue表格可编辑单元格及求和怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“antd vue表格可编辑单元格及求和怎么实现”文章能帮助大家解决问题。
1、参照官网根据自己需要添加可编辑单元格组件
新建EditableCell.vue
<template> <div class="editable-cell"> <div v-if="editable && isEditable" class="editable-cell-input-wrapper"> <a-input ref='inputs' :type='type ? "number" : "text"' :value="value" @change="handleChange" @blur="check" /> </div> <div v-else class="editable-cell-text-wrapper" @dblclick="edit"> <span>{{ value }}</span> </div> </div> </template> <script> export default { props: { text: [String, Number], type: Boolean, isEditable: { default: true, type: Boolean, }, }, data() { return { value: this.text, editable: false, }; }, methods: { handleChange(e) { const value = e.target.value; this.value = value; }, check() { this.editable = false; this.$emit('change', this.value); }, edit() { this.editable = true; this.$nextTick((x) => { if (this.$refs.inputs) { this.$refs.inputs.focus(); } }) }, }, }; </script> <style scoped> .editable-cell { position: relative; } .editable-cell-text-wrapper { padding: 4px 5px 5px 5px; cursor: pointer; } </style>
2、需要的页面引入
<template> <div > <a-table :bordered="true" :columns="tableColumn" :dataSource="tableData" :rowKey="record => record.index" size="small" :pagination="false" > <template v-for="item in 5" :slot="'month' + item" slot-scope="text, record"> <div :key="item"> <editable-cell v-if="record.title != '合计'" :text="text" :isEditable="true" @change="onCellChange(record, 'month' + item, $event, 'tableData')" /> <!--合计行不可编辑,需要单独写,不然无法视图上无法显示--> <span v-else>{{text}}</span> </div> </template> </a-table> </div> </template> <script> import EditableCell from "@/components/EditableCell"; export default { name: "App", components: { EditableCell }, data() { return { tableData: [ { index: 0, title: "合计" }, { index: 1, title: "费用1" }, { index: 2, title: "费用2" }, { index: 3, title: "费用3" }, { index: 4, title: "费用4" }, { index: 5, title: "费用5" } ], tableColumn: [] }; }, mounted() { this.initTable(); }, methods: { initTable() { let array = [3]; //设置可编辑列 this.tableColumn = [ { title: "类别", align: "center", dataIndex: "title" }, { title: "01", align: "center", dataIndex: "month2", width: 80, //判断该列是否可编辑 scopedSlots: array.includes(1) ? { customRender: "month2" } : "" }, { title: "02", align: "center", dataIndex: "month3", width: 80, scopedSlots: array.includes(2) ? { customRender: "month3" } : "" }, { title: "03", align: "center", dataIndex: "month4", width: 80, scopedSlots: array.includes(3) ? { customRender: "month4" } : "" }, { title: "04", align: "center", dataIndex: "month5", width: 80, scopedSlots: array.includes(4) ? { customRender: "month5" } : "" }, { title: "05", align: "center", dataIndex: "month6", width: 80, scopedSlots: array.includes(5) ? { customRender: "month6" } : "" } ]; }, onCellChange(key, dataIndex, value, tableName) { var obj = { index: key.index, title: key.title }; obj[dataIndex] = value; const dataSource = [...this[tableName]]; const target = dataSource.find(item => item.index === key.index); if (target) { if (target[dataIndex] !== value) { target[dataIndex] = value; if (!dataSource[0][dataIndex]) { dataSource[0][dataIndex] = 0; } dataSource[0][dataIndex] += value * 1; this[tableName] = dataSource; } } } } }; </script>
注意点:合计行是直接由下面几行汇总求和的,不需要设置为可编辑的,如果设置为可编辑,可编辑单元格无法动态获取数据变化,所以无法实时更新到页面上
template:
<a-table :columns="tableColumns" :data-source="tableData"> <span v-for="i in tableColumns" :key="i.dataIndex" :slot="i.dataIndex" slot-scope="text" contentEditable=true> {{text}} </span> </a-table>
在tableColumns中:
const tableColumns = [ { title: "编号", dataIndex:"stdId", scopedSlots: { customRender: "stdId" }} ];
还有一个问题就是点击单元格会出现一个border,取消掉的css样式:
[contenteditable]:focus{outline: none;}
关于“antd vue表格可编辑单元格及求和怎么实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。