参考资料地址1：https://pan.baidu.com/s/1ZlkRAbUu1mQE5JEAlbuTvw 提取码: 24b2
参考资料地址2：https://share.weiyun.com/7RUYskT6 密码：adbvfp
WPF概念：
WPF即Windows Presentation Foundation，翻译为中文“Windows呈现基础”，是微软推出的基于Windows Vista的用户界面框架，属于.NET Framework 3.0的一部分。它提供了统一的编程模型、语言和框架，真正做到了分离界面设计人员与开发人员的工作；同时它提供了全新的多媒体交互用户图形界面。
WPF特点
1、统一的编程模型
WPF提供的编程模型统一普通控件、语音、视频、文档3D等技术，这些媒体类型能够统一协调工作，降低了我们的学习成本。
2、与分辨率无关
WPF是基于矢量绘图的，因此它产生的图形界面能够支持各种分辨率的显示设备，而不会像WinForm等在高分辨率的现实设备上产生锯齿。
3、硬件加速技术
WPF是基于Direct3D创建。在WPF应用程序中无论是2D还是3D的图形或者文字内容都会被转换为3D三角形、材质和其他Direct3D对象，并由硬件负责渲染，因此它能够更好的利用系统的图像处理单元GPU，从硬件加速中获得好处。
4、声明式编程
WPF引入一种新的XAML语言（Extensible Application Markup Language）来开发界面。使用XAML语言将界面开发以及后台逻辑开发很好的分开，降低了前后台开发的耦合度，使用户界面设计师与程序开发者能更好的合作，降低维护和更新的成本。
5、易于部署
WPF除了可以使用传统的Windows Installer以及ClickOnce方式来发布我们的桌面应用程序之外，还可以将我们的应用程序稍加改动发布为基于浏览器的应用程序。
现在很多WPF项目都开源了，不过反编译工具还是少不了的。比起dnSpy和JustDecompile，我更喜欢ILSpy，因为有很多BAML只有ILSpy能反编译出来。
为何从 .NET Framework 升级
将应用程序从 .NET Framework 升级到 .NET 时，你将受益于：
性能更好
新的 .NET API
最新语言改进
改进的辅助功能和可靠性
更新的工具及其他
通过 WPF，可以使用标记和代码隐藏开发应用程序，这是 ASP.NET 开发人员已经熟悉的体验。 通常使用 XAML 标记实现应用程序的外观，同时使用托管编程语言（代码隐藏）来实现其行为。 这种外观和行为的分离具有以下优点：
降低了开发和维护成本，因为特定于外观的标记与特定于行为的代码不紧密耦合。
开发效率更高，因为设计人员在实现应用程序外观的同时，开发人员可以实现应用程序的行为。
创建 src/views/chart/components/table-sheet/components/s2.vue 作为图表渲染组件
<template>
<el-card
:body-style="{
padding: 0
}"
>
<div class="container" ref="target">s2</div>
</el-card>
</template>
<script setup></script>
<style lang="scss" scoped>
.container {
height: 782px;
}
</style>
在 src/api/chart.js 中创建数据获取方法：
<script setup>
import { getChartTimeAmount } from '@/api/chart'
import { ref } from 'vue'
/**
* 获取数据
*/
const data = ref([])
const getData = async date => {
const { result } = await getChartTimeAmount(date)
data.value = result
// 渲染图表
}
getData()
</script>
在 user-manage 中获取对应数据
<script setup>
import { ref } from 'vue'
import { getUserManageList } from '@/api/user-manage'
import { watchSwitchLang } from '@/utils/i18n'
// 数据相关
const tableData = ref([])
const total = ref(0)
const page = ref(1)
const size = ref(2)
// 获取数据的方法
const getListData = async () => {
const result = await getUserManageList({
page: page.value,
size: size.value
})
tableData.value = result.list
total.value = result.total
}
getListData()
// 监听语言切换
watchSwitchLang(getListData)
</script>
根据数据利用 el-table 和 el-pagination 渲染视图
<template>
<div class="user-manage-container">
<el-card class="header">
<div>
<el-button type="primary"> {{ $t('msg.excel.importExcel') }}</el-button>
<el-button type="success">
{{ $t('msg.excel.exportExcel') }}
</el-button>
</div>
</el-card>
<el-card>
<el-table :data="tableData" border style="width: 100%">
<el-table-column label="#" type="index" />
<el-table-column prop="username" :label="$t('msg.excel.name')">
</el-table-column>
<el-table-column prop="mobile" :label="$t('msg.excel.mobile')">
</el-table-column>
<el-table-column :label="$t('msg.excel.avatar')" align="center">
<template v-slot="{ row }">
<el-image
class="avatar"
:src="row.avatar"
:preview-src-list="[row.avatar]"
></el-image>
</template>
</el-table-column>
<el-table-column :label="$t('msg.excel.role')">
<template #default="{ row }">
<div v-if="row.role && row.role.length > 0">
<el-tag v-for="item in row.role" :key="item.id" size="mini">{{
item.title
}}</el-tag>
</div>
<div v-else>
<el-tag size="mini">{{ $t('msg.excel.defaultRole') }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="openTime" :label="$t('msg.excel.openTime')">
</el-table-column>
<el-table-column
:label="$t('msg.excel.action')"
fixed="right"
width="260"
>
<template #default>
<el-button type="primary" size="mini">{{
$t('msg.excel.show')
}}</el-button>
<el-button type="info" size="mini">{{
$t('msg.excel.showRole')
}}</el-button>
<el-button type="danger" size="mini">{{
$t('msg.excel.remove')
}}</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[2, 5, 10, 20]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</el-card>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { getUserManageList } from '@/api/user-manage'
import { watchSwitchLang } from '@/utils/i18n'
// 数据相关
const tableData = ref([])
const total = ref(0)
const page = ref(1)
const size = ref(2)
// 获取数据的方法
const getListData = async () => {
const result = await getUserManageList({
page: page.value,
size: size.value
})
tableData.value = result.list
total.value = result.total
}
getListData()
// 监听语言切换
watchSwitchLang(getListData)
// 分页相关
/**
* size 改变触发
*/
const handleSizeChange = currentSize => {
size.value = currentSize
getListData()
}
/**
* 页码改变触发
*/
const handleCurrentChange = currentPage => {
page.value = currentPage
getListData()
}
</script>
<style lang="scss" scoped>
.user-manage-container {
.header {
margin-bottom: 22px;
text-align: right;
}
::v-deep .avatar {
;
height: 60px;
border-radius: 50%;
}
::v-deep .el-tag {
margin-right: 6px;
}
.pagination {
margin-top: 20px;
text-align: center;
}
}
</style>
在 src/views/chart/components/table-sheet/components/s2.vue 中，监听 data 的变化，触发 render 函数：
onMounted(() => {
// 配置对象
const s2Options = {
...
}
// 生成 S2 实例，数据对象置为 null
s2 = new TableSheet(target.value, {}, s2Options)
})
/**
* 图标渲染函数
*/
const renderChart = () => {
// 数据对象
const s2DataCfg = {
...
}
// 更新数据
s2.setDataCfg(s2DataCfg)
// 渲染视图，传入 true 表示数据发生了更新
s2.render(true)
}
/**
* 监听数据变化
*/
watch(
() => props.data,
() => {
renderChart()
}
)
扫码加好友，拉您进群
全部版块
我的主页
收藏
