极客观点
项目管理
HarmonyOS
js代码：
<!-- -->
<template>
<div class="best">
<el-container>
<el-aside width="181px" height="100%" style="background-color: #3a3846">
<div class="logo">
<img class="imgposition" src="../assets/编组 4.png" />
<p class="logoname">证券尊享平台</p>
</div>
<el-menu :default-openeds="['1', '5']">
<el-submenu index="1">
<template slot="title">
<div class="bgc">
<i class="el-icon-s-home" style="/"></i>首页
</div>
</template>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>产品</template>
<el-menu-item-group>
<el-menu-item index="2-1" style="color: #fff">选项1</el-menu-item>
<el-menu-item index="2-2" style="color: #fff">选项2</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title"><span class="iconfont">  </span>社区</template>
</el-submenu>
<el-submenu index="4">
<template slot="title"><span class="iconfont">  </span>消息</template>
</el-submenu>
<el-submenu index="5">
<template slot="title"><span class="iconfont">  </span>用户价值分析</template>
</el-submenu>
</el-menu>
</el-aside>
<div class="main">
<el-header>
<div class="headerright">
<div class="usermessage">
<div class="iconuser">
<span class="iconfont" style="color: #3a3846"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
</div>
<div class="user">
<div class="userimg">
<img src="" alt="" />
</div>
<p class="username">
用户名<span class="el-icon-caret-bottom"></span>
</p>
</div>
</div>
</div>
</el-header>
<div class="mainhead">
<div v-for="(item, index) in textName" :key="index">
<span class="book">{{ item.name }}</span>
<input v-model="query[item.lable]" placeholder="请输入" />
</div>
<el-row>
<el-button type="danger" @click="search()">查询</el-button>
<el-button>重置</el-button>
</el-row>
</div>
<div class="maintable">
<div class="father">
<el-table ref="multipleTable" :data="list" tooltip-effect="dark" @selection-change="handleSelectionChange" fit="true">
<el-table-column type="selection"> </el-table-column>
<el-table-column label="序号" >
<template slot-scope="scope">{{ scope.row.Num }}</template>
</el-table-column>
<el-table-column sortable prop="reportType" label="报告类型" >
</el-table-column>
<el-table-column sortable prop="reportName" label="报告名称" >
</el-table-column>
<el-table-column sortable prop="progress" label="信批进度" >
</el-table-column>
<el-table-column sortable prop="date" label="报告更新日期" >
</el-table-column>
<el-table-column label="操作" width=176>
<template slot-scope="scope" width="188">
<span @click="getPro(scope)">预览</span>
<span @click="modifyPro(scope)">下载</span>
<span @click="delePro(scope)">催办</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="fenyeqi"></div>
</div>
</div>
</el-container>
</div>
</template>
<script>
//这⾥可以导⼊其他⽂件（⽐如：组件，⼯具js，第三⽅插件js，json⽂件，图⽚⽂件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
//import引⼊的组件需要注⼊到对象中才能使⽤
components: {},
data() {
//这⾥存放数据
return {
tableData: [
{
Num: "1",
reportType: "123131",
reportName: "报告名称报告名称123456",
progress: "已完成",
date: 2022 - 10 - 10,
},
{
Num: "1",
reportType: "123131",
reportName: "报告名称报告名称",
progress: "已完成",
date: 2021 - 11 - 13,
},
{
Num: "1",
reportType: "123131",
reportName: "报告名称报告名称",
progress: "已完成",
date: 2021 - 11 - 13,
},
{
Num: "1",
reportType: "123131",
reportName: "报告名称报告名称",
progress: "已完成",
date: 2021 - 11 - 13,
},
{
Num: "1",
reportType: "123131",
reportName: "报告名称报告名称",
progress: "已完成",
date: 2021 - 11 - 13,
},
{
Num: "1",
reportType: "123131",
reportName: "报告名称报告名称",
progress: "已完成",
date: 2021 - 11 - 13,
},
{
Num: "1",
reportType: "123131",
reportName: "报告名称报告名称",
progress: "已完成",
date: 2021 - 11 - 13,
},
],
list: [],
oooo: ["你好", "ok"],
textName: [{ name: "产品名称", lable: "reportName" },
{ name: "报告类型", lable: "reportType" },
{ name: "报告年份", lable: " date" },
{ name: "状态",lable: " date" },
],
query: []
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//⽅法集合
methods: {
// search() {
// const filter = (query, list) => {
// return list.filter((item)=>{
// return Object.keys(query).every((key)=>{
// return String(item[key]).includes(String(query[key]).trim())
// })
// })
// }
// this.list.filter(this.query,this.list)
// },
search() {
const filter = (query, list) => {
return list.filter((item) => {
return Object.keys(query).every((key) => {
return String(item[key]).includes(String(query[key]).trim())
})
})
}
this.list=filter(this.query,this.list)
},
reset() {
this.list = this.tableData;
},
handleSelectionChange() { },
},
//⽣命周期 - 创建完成（可以访问当前this实例）
created() {
},
//⽣命周期 - 挂载完成（可以访问DOM元素）
mounted() { this.list = this.tableData;},
beforeCreate() { }, //⽣命周期 - 创建之前
beforeMount() { }, //⽣命周期 - 挂载之前
beforeUpdate() { }, //⽣命周期 - 更新之前
updated() { }, //⽣命周期 - 更新之后
beforeDestroy() { }, //⽣命周期 - 销毁之前
destroyed() { }, //⽣命周期 - 销毁完成
activated() { }, //如果⻚⾯有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" src="../css/first.css">
</style>
css代码
body {
margin: 0;
padding: 0;
height: 100%
}
ul {
padding: 0;
}
li {
list-style-type: none;
}
.el-aside {
position: relative;
overflow: hidden;
height: 100%;
}
.el-header,
.el-footer {
color: #333;
text-align: center;
line-height: 60px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
.el-menu {
background-color: #3B3846;
}
.el-submenu__title {
color: #fff;
height: 60px;
}
.el-submenu__title:hover {
background-clip: content-box;
background-color: #474454;
}
.el-submenu__title:focus {
opacity: 100%;
background-color: aqua !important;
}
.iconfont {
color: #909399;
font-size: 18px;
}
.el-icon-arrow-down:before {
content: none;
}
.el-submenu:nth-of-type(2) .el-icon-arrow-down:before {
content: "\E6DF";
}
.cell span {
color: red;
}
.cell span:nth-of-type(2) {
margin: 0 30px;
}
.cell span:hover {
cursor: pointer;
}
.el-table /deep/.caret-wrapper {
width: 10px;
}
.el-table.el-table__cell {
margin-right: 30px !important;
}
.el-table__header-wrapper {
display: flex;
justify-content: space-between;
}
.el-submenu .el-menu-item {
/* min-width: 180px; */
background-color: #3B3846;
}
.el-container {
height: 100%;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
i {
width: 24px;
height: 24px;
}
.el-menu-item-group {
background-color: #3B3846;
}
.el-menu {
opacity: 50%;
}
.el-header {
position: relative;
border-bottom: 4px solid rgba(0,21,41,0.12);
}
.logo {
height: 60px;
width: 180px;
background-image: url(../assets/编组.png);
}
.imgposition {
position: absolute;
top: 9px;
left: 17px;
}
.logoname {
position: absolute;
top: auto;
left: 50px;
width: 114px;
height: 26px;
line-height: 26px;
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 19px;
color: #FFFFFF;
letter-spacing: 0;
}
.user {
width: 130px;
height: 60px;
float: left;
}
.usermessage {
height: 60px;
text-align: left;
}
.userimg {
float: left;
width: 24px;
height: 24px;
background-color: aqua;
border-radius: 12px;
line-height: 24px;
margin-top: 18px;
}
.iconuser {
float: left;
}
.username {
float: left;
margin: 0;
line-height: 60px;
}
.el-icon-caret-bottom:hover {
cursor: pointer;
}
.headerright {
position: absolute;
top: 0;
right:0px;
height: 56px;
background: #FFFFFF;
}
.main {
height: 100%;
font-size: 14px;
flex:1
}
.inputcss {
width: 266px;
height: 28px;
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
margin-top: 16px;
}
.inputname:nth-of-type(2),.inputname:nth-of-type(3) {
margin-left: 80px;
}
.mainhead {
position: relative;
padding: 0 20px;
height: 115px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.best {
min-width: 1300px;
}
.el-row {
display: inline-block;
position: absolute;
top: 68px;
right: 40px;
}
.maintable {
border: 20px solid #F0F3F7;
padding: 20px 0;
}
.best {
height: 100%;
}
.mainhead div:nth-of-type(-n+4) {
line-height: 22px;
min-width: 355px;
font-size: 14px;
padding-top: 20px;
}
.mainhead div:nth-of-type(4) {
padding-left: 2em;
}
.mainhead div input {
height: 26px;
width: 268px;
}
.book::after {
content: ":";
display: inline-block;
width: 15px;
}
.fenyeqi {
width: 200px;
height: 50px;
}
.maintable {
position: relative;
height: 100%;
}
.father {
position: absolute;
width: 100%;
height: 100%;
}
html5