外包题：用vue实现改变文件查看方式，文件检索，文件排序

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;
    }