最近几天刚把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()
},