antd?vue表格可編輯單元格及求和怎么實現

這篇文章主要介紹“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表格可編輯單元格及求和怎么實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。