前端学习笔记

自学期间遇到的问题：

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>

 

报错

解决

~@ 开头是绝对路径

 

 

问题：父盒子跟随子盒子一起动的margin-top

描述：当我们想给子元素设置margin-top时，发现子元素没有出现上外边距的效果，反而是父元素出现了上外边距的效果。

 

 

 

解释：

根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己父元素。直到找到父元素有有效的padding或border为止。

 

解决方法：

 

1.给父盒子设置padding-top

 

2.给父盒子设置border-top

 

3.给父盒子设置overflow: hidden

 

三种方法都可解决问题，一般推荐第三种，给父元素设置overflow：hidden

 

 

 

问题：idea报错'vue-cli-service' 不是内部或外部命令,也不是可运行的程序

答：将“node_modules”文件夹删除，重新运行npm install。

 

 

问题：将input和img放同一行，img标签总是比input高出一个头

答：input,img{vertical-align:middle;}

 

问题：给input边框和背景颜色设置全透明，但是里面的字不会消失

答：1.让背景颜色变透明(二选一)

background-color:rgba(0,0,0,0);

background:rgba(0,0,0,0);

 

2.让边框变透明(二选一)

border-color: transparent;

border: 1px solid rgba(0,0,0, 0);

 

问：怎样用Git命令克隆项目到指定文件夹里

答：找到文件夹，右键Git base here

 

问：两个span在一行？不对称？

答：   一行：display：flex;

对称：align-items: center;

 

问：Tag标签设置height和width后tag标签上的文字内容不是位于tag标签的中心

答：设置line-height和tag的height的值一样

 

问：npm 安装报错：源文本中存在无法识别的标记

答：在包名外面加一对双引号（单引号也可以）