iView使用中的注意项
2023-03-14 22:42:44 时间
官网
https://www.iviewui.com/components/table
Table
<template>
<div>
<Table border :columns="table_header" :data="table_data">
<template slot-scope="{ row }" slot="name">
<strong>{{ row.name }}</strong>
</template>
<template slot-scope="{ row, index }" slot="action">
<Button
type="primary"
size="small"
style="margin-right: 5px"
@click="show(index)"
>查看</Button
>
<Button type="error" size="small" @click="remove(index)">删除</Button>
</template>
</Table>
</div>
</template>
<script>
export default {
name: "assess_detail",
data: function() {
return {
table_header: [
{
title: "Name",
slot: "name"
},
{
title: "Age",
key: "age"
},
{
title: "Address",
key: "address"
},
{
title: "Action",
slot: "action",
width: 150,
align: "center"
}
],
table_data: [
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park"
},
{
name: "Jim Green",
age: 24,
address: "London No. 1 Lake Park"
},
{
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park"
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park"
}
]
};
},
methods: {
show(index) {
this.$Modal.info({
title: "User Info",
content: `Name:${this.data6[index].name}<br>Age:${this.data6[index].age}<br>Address:${this.data6[index].address}`
});
},
remove(index) {
this.data6.splice(index, 1);
}
}
};
</script>
Page
<template>
<div>
<Page
:current="table_page.current"
:page-size="table_page.page_size"
:page-size-opts="table_page.page_size_opts"
:total="table_page.total"
prev-text="上一页"
next-text="下一页"
show-elevator
show-sizer
show-total
/>
</div>
</template>
<script>
export default {
name: "assess_detail",
data: function() {
return {
table_page: {
current: 1,
page_size: 10,
page_size_opts: [10, 20, 30],
total: 100
}
};
},
methods: {
}
};
</script>
弹窗
<Modal
v-model="show_detail_dialog"
width="800"
draggable
sticky
scrollable
:mask="false"
title="我是标题"
>
</Modal>
提示信息
this.$Message.info(res.msg);
this.$Message.warning(res.msg);
this.$Message.success(res.msg);
this.$Message.error(res.msg);
加载中
const msg = this.$Message.loading({
content: 'Loading...',
duration: 0
});
取消加载中
setTimeout(msg, 3000);
或者用全局销毁
this.$Message.destroy();
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的