目录
显示
这篇文章主要介绍“antd vue表格可编辑单元格及求和怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“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>
注意点：合计行是直接由下面几行汇总求和的，不需要设置为可编辑的，如果设置为可编辑，可编辑单元格无法动态获取数据变化，所以无法实时更新到页面上
antd vue 表格可编辑问题
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表格可编辑单元格及求和怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注云搜网行业资讯频道，小编每天都会为大家更新不同的知识点。