前端学习笔记

关注

原创最新推荐文章于 2026-05-24 09:51:30 发布 275 阅读 AI 写同款· GEO 优化 ›

Vitis HLS 学习指南与实践教程 Vitis HLS 学习指南与实践教程摘要：本文系统介绍了AMD Vitis HLS工具及其应用。HLS技术将C/C++代码自动转换为硬件描述语言，显著提升FPGA开发效率（5-10倍）。文章对比了HLS与传统RTL设计的优势，包括抽象级别高、开发周期短、代码重用性强等特点。详细讲解了Vitis HLS工具链的核心功能，包括支持的C/C++特性（如任意精度数据类型）、开发流程（项目创建-代码编写-仿真-综合）以及关键优化技术（流水线、循环展开、数组分割等编译指示）。通过具体代码示例展示了HLS设计方法，为F 阅读详情

自学期间遇到的问题：

1.在运行Vue项目时报错error 'scope' is defined but never used vue/no-unused-vars

slot-scope="scope"

改为slot-scope ="{}"

2.搜索栏和表格绑定

<el-table stripe style="width: 100%" :data="tableData.filter(data => !search || data.bm.toLowerCase().includes(search.toLowerCase()))">

</ el-table >

3、

el-pagination假分页表格数据的绑定方式

:data="tableData.slice((currentPage - 1)*pagesize, currentPage*pagesize)"

4、表单文字向右靠齐

<el-form :model="form" :label-position="labelPosition">

labelPosition:"left",

5、

分页和搜索框以及搜索按钮绑定全部代码

<template>

  <div>

    <el-input v-model="tableDataName" placeholder="请输入姓名" style="width:240px"></el-input>



    <el-button type="primary" @click="doFilter">搜索</el-button>

    <el-button type="primary" @click="openData">展示数据</el-button>



    <el-table :data="tableDataEnd" border style="width: 100%">

      <el-table-column prop="date" label="日期" width="180">

      </el-table-column>

      <el-table-column prop="name" label="姓名" width="180">

      </el-table-column>

      <el-table-column prop="address" label="地址">

      </el-table-column>

    </el-table>

    <el-pagination 

    background

    @size-change="handleSizeChange" 

    @current-change="handleCurrentChange" 

    :current-page="currentPage" 

    :page-sizes="[2,4,8]" 

    :page-size="pageSize" 

    layout="total, sizes, prev, pager, next, jumper" 

    :total="totalItems">

    </el-pagination>

  </div>

</template>



<script>

  export default {

    data() {

      return {

        tableDataBegin: [

        {

          date: "2016-05-01",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1518 弄"

        },

        {

          date: "2016-05-02",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1517 弄"

        },

        {

          date: "2016-05-03",

          name: "王二虎",

          address: "上海市普陀区金沙江路 1519 弄"

        },

        {

          date: "2016-05-04",

          name: "王二虎",

          address: "上海市普陀区金沙江路 1516 弄"

        },

        {

          date: "2016-05-05",

          name: "王三虎",

          address: "上海市普陀区金沙江路 1518 弄"

        },

        {

          date: "2016-05-06",

          name: "王三虎",

          address: "上海市普陀区金沙江路 1517 弄"

        },

        {

          date: "2016-05-07",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1519 弄"

        },

        {

          date: "2016-05-08",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1516 弄"

        }],

        tableDataName: "",

        tableDataEnd: [],

        currentPage: 4,

        pageSize: 2,

        totalItems: 0,

        filterTableDataEnd: [],

        flag: false

      };

    },

    created() {

      this.totalItems = this.tableDataBegin.length;

      if (this.totalItems > this.pageSize) {

        for (let index = 0; index < this.pageSize; index++) {

          this.tableDataEnd.push(this.tableDataBegin[index]);

        }

      } else {

        this.tableDataEnd = this.tableDataBegin;

      }

    },

    methods: {

      //前端搜索功能需要区分是否检索,因为对应的字段的索引不同

      //用两个变量接收currentChangePage函数的参数

      doFilter() {

        if (this.tableDataName == "") {

          this.$message.warning("查询条件不能为空！");

          return;

        }

        this.tableDataEnd = []

        //每次手动将数据置空,因为会出现多次点击搜索情况

        this.filterTableDataEnd = []

        this.tableDataBegin.forEach((value, index) => {

          if (value.name) {

            if (value.name.indexOf(this.tableDataName) >= 0) {

              this.filterTableDataEnd.push(value)

            }

          }

        });

        //页面数据改变重新统计数据数量和当前页

        this.currentPage = 1

        this.totalItems = this.filterTableDataEnd.length

        //渲染表格,根据值

        this.currentChangePage(this.filterTableDataEnd)

        //页面初始化数据需要判断是否检索过

        this.flag = true

      },

      openData() {},

      handleSizeChange(val) {

        console.log(`每页 ${val} 条`);

        this.pageSize = val;

        this.handleCurrentChange(1);

      },



      handleCurrentChange(val) {

        console.log(`当前页: ${val}`);

        this.currentPage = val;

        //需要判断是否检索

        if (!this.flag) {

          this.currentChangePage(this.tableDataBegin);

          console.log(this.tableDataEnd);

        } else {

          this.currentChangePage(this.filterTableDataEnd);

          console.log(this.tableDataEnd);

        }

      }, //组件自带监控当前页码



      currentChangePage(list) {

        let from = (this.currentPage - 1) * this.pageSize;

        let to = this.currentPage * this.pageSize;

        this.tableDataEnd = [];

        for (; from < to; from++) {

          if (list[from]) {

            this.tableDataEnd.push(list[from]);

          }

        }

      }

    }

  };

</script>

报错