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表格可编辑单元格及求和怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。