html代码
<div id="app">
<div class="con">
<div class="row1 row">
<button @click="listView">列表视图</button>
<button @click="gridView">网格视图</button>
<button @click="orderBy">排序</button>
<input type="text" v-model="search">
</div>
<!-- 父组件向子组件传参 -->
<row2 :grid_flag="gridFlag" :list="list" :search="search" :order_by_num="orderByNum"></row2>
</div>
</div>
<template id="row2">
<div class="row2 row">
<!-- 当 grid_flag 为 true 时显示网格视图 -->
<ul :class="grid_flag?'grid':''">
<li :class="grid_flag?'grid':''" v-for="(item,index) in ListArrFn()" :key="index">{{item}}</li>
</ul>
</div>
</template>
逻辑实现
// 组件
Vue.component("row2", {
template: "#row2",
props: ['grid_flag', 'list', 'search', 'order_by_num'],
data() {
return {
ListArr: this.list,
listFileNameArr: []
}
},
created() {
this.pushFileName()
},
methods: {
// 将所有文件名提取出来用于排序
pushFileName() {
let FileNameArr = []
this.list.forEach(item => {
FileNameArr.push(item.fileName)
})
this.listFileNameArr = FileNameArr
},
// v-for循环的数组
ListArrFn() {
// 搜索过滤
let ListArrFilter = this.listFileNameArr.filter((item) => {
return item.includes(this.search)
})
// 排序
switch (this.order_by_num) {
case 0:
// 原序
return ListArrFilter
break;
case 1:
// 升序
return ListArrFilter.sort((a, b) => {
if (a > b) { // 按某种排序标准进行比较,
return 1
} else if (a < b) {
return -1
} else {
return 0
}
})
break;
case -1:
// 降序
return ListArrFilter.sort((a, b) => {
if (a > b) {
return -1
} else if (a < b) {
return 1
} else {
return 0
}
})
break;
}
}
}
})
// Vue实例
new Vue({
el: "#app",
data() {
return {
gridFlag: false, // 网格视图开关
search: "", // 搜索词
orderByNum: 0, // 排序代码
list: [
{
id: 1,
fileName: "teasdfxt1.txt",
},
{
id: 2,
fileName: "asd2.txt",
},
{
id: 3,
fileName: "hgfht3.txt",
},
{
id: 4,
fileName: "dgw4.txt",
},
{
id: 5,
fileName: "xczvsdf5.txt",
},
{
id: 6,
fileName: "de6.txt",
},
{
id: 7,
fileName: "fghdfgh5.txt",
}
]
}
},
mounted() {
},
methods: {
// 列表视图
listView() { this.gridFlag = false },
// 网格视图
gridView() { this.gridFlag = true },
// 排序
orderBy() {
// 0不排序 1升序 -1降序
this.orderByNum++
if (this.orderByNum == 2) {
this.orderByNum = -1
}
}
},
})
样式
* {
margin: 0;
padding: 0;
}
.con {
width: 641px;
min-height: 600px;
margin: 0 auto;
border: 1px solid rgb(150, 145, 145);
}
.row {
padding: 8px 15px;
}
.row1 {
border-bottom: 1px solid rgb(150, 145, 145);
}
ul {
margin-top: 10px;
}
ul.grid {
display: flex;
flex-wrap: wrap;
}
li {
padding: 8px 0;
border-bottom: 1px solid rgb(150, 145, 145);
list-style: none;
}
li.grid {
margin: 0px 10px 20px 10px;
flex-shrink: 0;
border: 1px solid rgb(150, 145, 145);
width: 80px;
height: 55px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}