vue笔记

最新推荐文章于 2023-07-26 11:55:36 发布

原创最新推荐文章于 2023-07-26 11:55:36 发布 · 743 阅读

0 ·

CC 4.0 BY-SA版权

本文记录了在学习Vue基础知识后，通过实践项目遇到并解决的问题，包括调整主页高度、在输入栏嵌入图标、迭代显示侧导航及穿梭框数据操作等，适合初学者参考。

最近几天刚把vue的基础知识看了一遍，准备跟着另一位前辈的博客搭一个大概的项目

在这里记录一下我自己看不懂研究的问题

一、主页过小，只有一个div的高度

主页这部分我不知从头跟着写的，我在Element的文档里把侧栏的代码写完的，导致最后我的主页就在页面上面20%的地方。

百度搜索各种调整div和body高度的配置都不生效，最后发现时少写了个

<div class="app">

前辈在css文件中写了高度，但是我忘了写这个导致主页只占了页面的20%。

总结：组件中的div高度需要在组件中写，跟main.js和App.vue没关系

二、如何在输入栏中嵌入图标

在使用font-awesome的过程中，前辈只写了需要添加的代码，但是没有说新的代码要添加在哪里

<template slot="prepend"><span class="fa fa-user fa-lg" style="width: 13px"></span></template>

穷举法试了很多排列组合方式，最后在下面的评论里看到了正确的方式

<el-input type="text" v-model="ruleForm2.username" auto-complete="off" placeholder="用户名">
  <template slot="prepend"><span class="fa fa-user fa-lg" style="width: 13px"></span></template>
</el-input>

如果你想在输入栏中嵌入图标，需要将图标写入到“input”中，并且由

slot="prepend"

属性来控制图标嵌入的位置，

prepend是在左边 append是在右边 suffix是添加在中间

三、记录一个暂时用不上的迭代显示侧导航栏

https://www.cnblogs.com/wbjxxzx/p/9977220.html

四、使用elementUI的table做穿梭框，无法将选中的数据添加到另一个table中

selectLeftData (rows) {
  this.selectedLeftData = []
  this.selectedLeftData.push(...rows)
},
moveLeftDataToRight: function () {
  this.$refs.leftTable.clearSelection()
  // 将左边已经选中的数据添加进右边的data中
  this.rightTableData = this.rightTableData.concat(this.selectedLeftData)
},

出现无法将已选中的数据添加进右边的data中，

原因是“clearSelection()”方法也会触发复选框改变事件，将选中的数据清空，所以才不能将选中数据添加到右边

需要将清空复选框方法放在最下面

moveLeftDataToRight: function () {
  // 将左边已经选中的数据添加进右边的data中
  this.rightTableData = this.rightTableData.concat(this.selectedLeftData)
  this.$refs.leftTable.clearSelection()
},