AntDesign可编辑表格+VUX

在项目中我本来写的AntDesign正常的表格就是编辑会弹出模态框的那种 如下[图片上传中...(07BB190F-EC08-4D3F-B5C6-38C11F39474A.png-b23752-1577156129260-0)]
图

72D4053C-0938-4C0D-ACCA-16DDA8B7CEEC.png
但是呢 产品经理觉得这样模态框中数据不多 没有必要整这么多模态框 弹来弹去眼睛花 所以呢让我改成可编辑表格如下图 07BB190F-EC08-4D3F-B5C6-38C11F39474A.png

首先说一下数据的渲染方法，这两种表格的数据都是挂载到vux上面的之所以挂到vux上面也是为了方便数据的实时更新，(比如：添加、编辑、删除都需要实时更新)
OK 今天我就来说一下这个东西怎么弄
先放全部代码

<template>
  <a-table :columns="columns" :dataSource="data" rowKey="id" bordered>
    <template
      v-for="col in ['article_column', 'abstract', 'time']"
      :slot="col"
      slot-scope="text, record, index"
    >
      <div :key="col">
        <a-input
          v-if="record.editable"
          style="margin: -5px 0"
          :value="text"
          @change="e => handleChange(e.target.value, record.editor_id, col)"
        />
        <template v-else>{{text}}</template>
      </div>
    </template>
    <template slot="operation" slot-scope="text, record, index">
      <div class="editable-row-operations">
        <span v-if="record.editable">
          <a @click="() => save(record.editor_id)" class="btn ok_btn">确认</a>
          <a-popconfirm
            title="确认取消本次操作?"
            @confirm="() => cancel(record.editor_id)"
            okText="确定"
            cancelText="关闭"
          >
            <a class="btn no_btn">取消</a>
          </a-popconfirm>
        </span>
        <span v-else>
          <a-button type="primary" @click="() => edit(record.editor_id)">编辑</a-button>
          <a-popconfirm
            placement="topRight"
            title="确认删除本条数据?"
            okText="确定"
            cancelText="关闭"
            @confirm="() => dell(record.editor_id)"
          >
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <a-button class="btn del" type="danger">删除</a-button>
          </a-popconfirm>
        </span>
      </div>
    </template>
  </a-table>
</template>
<script>
import { dellColumn, editorColumn } from "@/api/news";

const columns = [
  {
    title: "ID",
    dataIndex: "id",
    width: "10%",
    scopedSlots: { customRender: "id" }
  },
  {
    title: "文章栏目",
    dataIndex: "article_column",
    width: "25%",
    scopedSlots: { customRender: "article_column" }
  },
  {
    title: "摘要",
    dataIndex: "abstract",
    width: "25%",
    scopedSlots: { customRender: "abstract" }
  },
  {
    title: "创建时间",
    dataIndex: "time",
    width: "20%",
    scopedSlots: { customRender: "time" }
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];
export default {
  data() {
    return {
      columns
    };
  },
  // 渲染表格
  created() {
    this.$store.dispatch("get_article_column");
  },
  methods: {
    // 编辑状态中的input值
    handleChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.editor_id)[0];
      console.log(target, "handleChange中的值");
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    // 编辑
    edit(key) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.editor_id)[0];
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
    // 编辑确认
    save(key) {
      console.log(key, "确认编辑的key");
      const newData = [...this.data];
      const target = newData.filter(item => key === item.editor_id)[0];
      if (target) {
        // 删除editable=true这条
        delete target.editable;
        // 更新到表格实现实时渲染
        this.data = newData;
        // 发送编辑请求
        // 发送编辑修改请求
        const param_q = new URLSearchParams(target);
        editorColumn(param_q).then(resp => {
          this.$store.dispatch("get_article_column");
        });
        // 弹框提示
        this.$message({ type: "success", message: "编辑成功!" });
      }
    },
    // 确认取消
    cancel(key) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.editor_id)[0];
      if (target) {
        delete target.editable;
        this.data = newData;
      }
      this.$message({ type: "info", message: "已取消编辑" });
    },
    // 删除确认（在vux中直接删）
    dell(key) {
      // console.log(key, "dell的key");
      // 删除请求
      dellColumn(key).then(resp => {
        this.$store.dispatch("get_article_column");
      }),
        this.$message({ type: "success", message: "删除成功!" });
    }
  },
  computed: {
    data: {
      // 先获取带article_column_data
      get() {
        const data1 = this.$store.getters.article_column_data;
        return this.$store.getters.article_column_data;
      },
      // 有set这个方法才可以修改article_column_data
      set(article_column_data) {
        this.$store.commit("SET_DATA", article_column_data);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.ok_btn {
  color: #28b78d;
  border: 1px solid #28b78d;
}

.no_btn {
  color: #ccc;
  border: 1px solid #ccc;
}
</style>

化重点啦！！ 你们看这里有用到get()和set()data

  computed: {
    data: {
      // 先获取带article_column_data
      get() {
        const data1 = this.$store.getters.article_column_data;
        return this.$store.getters.article_column_data;
      },
      // 有set这个方法才可以修改article_column_data
      set(article_column_data) {
        this.$store.commit("SET_DATA", article_column_data);
      }
    }
  }

为什么呢？ 因为呀和普通的deta return不同如下图

 computed: {
    data() {
      return this.$store.getters.label_data;
    }
  }

因为这种是直接把vux中的data给赋值做改变 但是呢我们要改变data中的值需要把指定的那条数据中增加一条editable = true然后做if 判断 如果editable = true就出现input的输入框进入编辑状态 73690DB6-1945-4687-B39D-87011C9E2453.png

所以呢 我们要先get()到当前表格需要的data在需要修改指定的数据时候在set()中提交修改 因为想修改data就一定要写set()也一定要提交 不然没有提交修改操作那么vux中的数据就不会修改,
所以一定要修改！！！

B4D5A70F-C7B9-4AE5-B4FC-54782CECA17D.png
然后就可以啦～～～