标签：const title data 对话框 value dataIndex Modal Vue3 ref
写在前面
好久没学习更新博客了，不是懒，也不是不想学习，而是之前把大部分精力都去谈恋爱了,没法做到学习和恋爱都兼顾的很好。
可能有的同学会说，六哥，你都这么努力了，咋还是分了？换我，我就能处理的很好。
我想说，兄弟你是怎么做到地？来文末留言，或者私信我即可！
任务
- 点击每一行编辑按钮，弹出编辑框
- 编辑框显示电子书表单
表单的使用
秒变正经，进入正题，其实还是围绕Ant Design Vue中组件的使用展开，相信我，这并不难。
用大林哥的话说：
写代码不就是赋值粘贴改嘛！
至少这一刻，我是认可这句话的。
如何实现？
两步走，第一要使用Modal 对话框，要弹出对话框，然后加入From表单即可。
点击编辑按钮弹出对话框
加入Modal 对话框，示例代码如下：
<template>
<a-layout class="layout">
<a-layout-content
:style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
<a-table :columns="columns"
:row-key="record => record.id"
:data-source="ebooks1"
:pagination="pagination"
:loading="loading"
>
<template #cover="{ text: cover }">
<img v-if="cover" :src="cover" alt="avatar"/>
</template>
<template #name="{ text: name }">
<a>{{ text }}</a>
</template>
<template #customTitle>
<span>
<smile-outlined/>
Name
</span>
</template>
<template #action="{ record }">
<span>
<a-space size="small">
<a-button type="primary" @click="edit(record)">
编辑
</a-button>
<a-modal
v-model:visible="visible"
cancelText="取消"
okText="保存"
title="编辑电子书"
:confirm-loading="confirmLoading"
@ok="handleOk"
>
<p>这就是对话框的demo，有两秒自动刷新的效果哦</p>
</a-modal>
<a-button type="danger">
删除
</a-button>
</a-space>
</span>
</template>
</a-table>
</a-layout-content>
</a-layout>
</template>
<script lang="ts">
import {DownOutlined, SmileOutlined} from '@ant-design/icons-vue';
import {defineComponent, onMounted, reactive, ref, toRef} from 'vue';
import axios from 'axios';
export default defineComponent({
name: 'AdminEbook',
setup() {
const pagination = {
onChange: (page: number) => {
console.log(page);
},
pageSize: 3,
};
const visible = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);
const showModal = () => {
visible.value = true;
};
const handleOk = () => {
confirmLoading.value = true;
setTimeout(() => {
visible.value = false;
confirmLoading.value = false;
}, 2000);
};
const edit = (record: any) => {
visible.value = true;
};
const loading = ref(false);
const columns = [
{
title: '头像',
dataIndex: 'cover',
width: 120,
height: 120,
slots: {customRender: 'cover'}
},
{
title: '名称',
dataIndex: 'name'
},
{
title: '分类一',
dataIndex: 'category1Id',
key: 'category1Id',
},
{
title: '分类二',
dataIndex: 'category2Id',
key: 'category2Id',
},
{
title: '文档数',
dataIndex: 'docCount'
},
{
title: '阅读数',
dataIndex: 'viewCount'
},
{
title: '点赞数',
dataIndex: 'voteCount'
},
{
title: 'Action',
key: 'action',
slots: {customRender: 'action'}
}
];
//使用ref进行数据绑定
const ebooks = ref();
// 使用reactive进行数据绑定
const ebooks1 = reactive({books: []})
onMounted(() => {
axios.get("/ebook/list", {
params: {
page: 1,
size: 3
}
}).then(response => {
const data = response.data;
ebooks.value = data.content.list;
ebooks1.books = data.content.list;
})
})
return {
visible,
confirmLoading,
showModal,
handleOk,
pagination,
loading,
columns,
edit,
ebooks1: ebooks,
ebooks2: toRef(ebooks1, "books")
}
},
components: {
SmileOutlined,
DownOutlined,
},
});
</script>
<style scoped>
img {
width: 50px;
height: 50px;
}
</style>
编译运行，查看效果如下：
编辑框显示表单
这步感觉就更简单了，只要在Modal 对话框中加入Form表单即可，其本质还是组件的嵌套，整合代码如下：
<template>
<a-layout class="layout">
<a-layout-content
:style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
<a-table :columns="columns"
:row-key="record => record.id"
:data-source="ebooks1"
:pagination="pagination"
:loading="loading"
>
<template #cover="{ text: cover }">
<img v-if="cover" :src="cover" alt="avatar"/>
</template>
<template #name="{ text: name }">
<a>{{ text }}</a>
</template>
<template #customTitle>
<span>
<smile-outlined/>
Name
</span>
</template>
<template #action="{ record }">
<span>
<a-space size="small">
<a-button type="primary" @click="edit(record)">
编辑
</a-button>
<a-modal
v-model:visible="visible"
cancelText="取消"
okText="保存"
title="编辑电子书"
:confirm-loading="confirmLoading"
@ok="handleOk"
>
<a-form
:model="ebooks_data"
name="basic"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 16 }"
>
<a-form-item label="封面">
<a-input v-model:value="ebooks_data.cover"/>
</a-form-item>
<a-form-item label="名称">
<a-input v-model:value="ebooks_data.name"/>
</a-form-item>
<a-form-item label="分类一">
<a-input v-model:value="ebooks_data.category1Id"/>
</a-form-item>
<a-form-item label="分类二">
<a-input v-model:value="ebooks_data.category2Id"/>
</a-form-item>
<a-form-item label="描述">
<a-input v-model:value="ebooks_data.description"/>
</a-form-item>
<a-form-item label="文档数">
<a-input v-model:value="ebooks_data.docCount"/>
</a-form-item>
<a-form-item label="阅读数">
<a-input v-model:value="ebooks_data.viewCount"/>
</a-form-item>
<a-form-item label="点赞数">
<a-input v-model:value="ebooks_data.voteCount"/>
</a-form-item>
</a-form>
</a-modal>
<a-button type="danger">
删除
</a-button>
</a-space>
</span>
</template>
</a-table>
</a-layout-content>
</a-layout>
</template>
<script lang="ts">
import {DownOutlined, SmileOutlined} from '@ant-design/icons-vue';
import {defineComponent, onMounted, reactive, ref, toRef} from 'vue';
import axios from 'axios';
interface FormState {
username: string;
password: string;
remember: boolean;
}
export default defineComponent({
name: 'AdminEbook',
setup() {
const pagination = {
onChange: (page: number) => {
console.log(page);
},
pageSize: 3,
};
const ebooks_data = ref();
const onFinish = (values: any) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
const visible = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);
const showModal = () => {
visible.value = true;
};
const handleOk = () => {
confirmLoading.value = true;
setTimeout(() => {
visible.value = false;
confirmLoading.value = false;
}, 2000);
};
const edit = (record: any) => {
visible.value = true;
ebooks_data.value=record;
};
const loading = ref(false);
const columns = [
{
title: '封面',
dataIndex: 'cover',
width: 120,
height: 120,
slots: {customRender: 'cover'}
},
{
title: '名称',
dataIndex: 'name'
},
{
title: '分类一',
dataIndex: 'category1Id',
key: 'category1Id',
},
{
title: '分类二',
dataIndex: 'category2Id',
key: 'category2Id',
},
{
title: '描述',
dataIndex: 'description',
key: 'description',
},
{
title: '文档数',
dataIndex: 'docCount'
},
{
title: '阅读数',
dataIndex: 'viewCount'
},
{
title: '点赞数',
dataIndex: 'voteCount'
},
{
title: 'Action',
key: 'action',
slots: {customRender: 'action'}
}
];
//使用ref进行数据绑定
const ebooks = ref();
// 使用reactive进行数据绑定
const ebooks1 = reactive({books: []})
onMounted(() => {
axios.get("/ebook/list", {
params: {
page: 1,
size: 3
}
}).then(response => {
const data = response.data;
ebooks.value = data.content.list;
ebooks1.books = data.content.list;
})
})
return {
onFinish,
onFinishFailed,
visible,
confirmLoading,
showModal,
handleOk,
pagination,
loading,
columns,
edit,
ebooks_data,
ebooks1: ebooks,
ebooks2: toRef(ebooks1, "books")
}
},
components: {
SmileOutlined,
DownOutlined,
},
});
</script>
<style scoped>
img {
width: 50px;
height: 50px;
}
</style>
编译运行，结果如下图：
难点：
需要定义响应式变量，实现动态绑定传值，即点击编辑会带入当前选中列的属性值
写在最后
记得曾在头过年的前两天，看到这样一条朋友圈，让我重拾信心，又想继续学习了，如下图：
由于刚失恋不久，导致自己什么都不爱干，干什么都没有兴致。
看完他的朋友圈后，突然意识到自己不能这样总虚度时光的，应该和他学习，于是我就直接在他朋友圈下面写了这一段话：
不重要 有想变强的决心就可以了 至于什么变成大神 只是时间问题罢了
这句话同样送给那些惧怕代码的同学，其实大家都一样，你与大神差的只是想变强的决心罢了。
我觉得更多的时候，要学习下死神里的十一番队队长更木剑八，是一个特别享受战斗的人，他的信念就是只有战斗才能变强。
同理，代码也是一样总去写，不断地去写，才能进步，至于能不能成为大神，只是时间早晚的问题罢了。
如果屏幕前的你，还是觉得写代码很难，那么此刻，你也没什么可惧怕的，尽情享受就好了，如果还有什么担心，可以文末留言给我，也许我的经历会让你喜欢coding，也说不定呢。
标签：const,title,data,对话框,value,dataIndex,Modal,Vue3,ref 来源： https://www.cnblogs.com/longronglang/p/15860696.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。