在项目中我本来写的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;
}
}
73690DB6-1945-4687-B39D-87011C9E2453.png
所以呢 我们要先get()到当前表格需要的data在需要修改指定的数据时候在set()中提交修改 因为想修改data就一定要写set()也一定要提交 不然没有提交修改操作那么vux中的数据就不会修改,
所以一定要修改！！！
B4D5A70F-C7B9-4AE5-B4FC-54782CECA17D.png
然后就可以啦～～～
网友评论