antd vue表格可編輯單元格以及求和實現(xiàn)方式
更新時間：2023年04月21日 10:13:02 作者：lyckkb520m
這篇文章主要介紹了antd vue表格可編輯單元格以及求和實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
antd vue表格可編輯單元格以及求和實現(xiàn)
1、參照官網(wǎng)根據(jù)自己需要添加可編輯單元格組件
新建EditableCell.vue
<template>
<div class="editable-cell">
<div v-if="editable && isEditable" class="editable-cell-input-wrapper">
<a-input ref='inputs' style="height: 30px" :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 style="margin: 24px">
<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]; //設(shè)置可編輯列
this.tableColumn = [
{ title: "類別", align: "center", dataIndex: "title" },
{
title: "01",
align: "center",
dataIndex: "month1",
width: 80,
//判斷該列是否可編輯
scopedSlots: array.includes(1) ? { customRender: "month1" } : ""
},
{
title: "02",
align: "center",
dataIndex: "month2",
width: 80,
scopedSlots: array.includes(2) ? { customRender: "month2" } : ""
},
{
title: "03",
align: "center",
dataIndex: "month3",
width: 80,
scopedSlots: array.includes(3) ? { customRender: "month3" } : ""
},
{
title: "04",
align: "center",
dataIndex: "month4",
width: 80,
scopedSlots: array.includes(4) ? { customRender: "month4" } : ""
},
{
title: "05",
align: "center",
dataIndex: "month5",
width: 80,
scopedSlots: array.includes(5) ? { customRender: "month5" } : ""
}
];
},
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>
注意點：合計行是直接由下面幾行匯總求和的，不需要設(shè)置為可編輯的，如果設(shè)置為可編輯，可編輯單元格無法動態(tài)獲取數(shù)據(jù)變化，所以無法實時更新到頁面上
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" }}
];還有一個問題就是點擊單元格會出現(xiàn)一個border，取消掉的css樣式：
[contenteditable]:focus{outline: none;}總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue.js中,您可以使用watch選項來創(chuàng)建偵聽器,以偵聽特定屬性的變化,偵聽器可以在屬性發(fā)生變化時執(zhí)行相關(guān)的邏輯,本文給大家詳細(xì)講講Vue中watch偵聽器的用法,需要的朋友可以參考下2023-11-11
使用Vue3+PDF.js實現(xiàn)PDF預(yù)覽功能
項目中有一個需要預(yù)覽下載pdf的需求,網(wǎng)上找了很久,決定使用 pdf.js 完成,下面這篇文章主要給大家介紹了關(guān)于使用Vue3+PDF.js實現(xiàn)PDF預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了如何將百度地圖包裝成Vue的組件的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)購物車案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了vue單頁面修改樣式無法覆蓋問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
Vue Element前端應(yīng)用開發(fā)之組織機構(gòu)和角色管理
本篇文章繼續(xù)深化Vue Element權(quán)限管理模塊管理的內(nèi)容，介紹組織機構(gòu)和角色管理模塊的處理，使得我們了解界面組件化模塊的開發(fā)思路和做法，提高我們界面設(shè)計的技巧，并減少代碼的復(fù)雜性，提高界面代碼的可讀性，同時也是利用組件的復(fù)用管理。2021-05-05
這篇文章主要介紹了Vue3 axios配置以及cookie的使用方法,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實現(xiàn)簡單的信號和電池電量組件效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04
vue的v-on與v-bind,v-on就是用于綁定事件的,下面這篇文章主要給大家介紹了關(guān)于vue3常用的指令之v-bind和v-on指令用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue簡單的二維數(shù)組循環(huán)嵌套方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04