vue随笔笔记

1.关于路由

• 路由组件出口、路由指定链接不需要引入组件
• 使用路由视图命名
• 在父组件绑定

2.关于elementUI

2-1.设置侧边栏背景选中颜色

复制代码

.el-menu-item.is-active {
  background: #303445d9 !important; //设置激活背景颜色
  color: #fff; //设置激活文字颜色
}

2-2.表格中的操作

- 表格的数据获取 data、prop、index

复制代码

//data的数据为tableDate渲染的数据
 <el-table :data="tableData" stripe border style="width: 100%"> </el-table>
// prop设置表格字段

    <el-table-column label="商品ID"  width="80" prop="name">

// index设置索引值
    <el-table-column label="商品ID" type="index" width="80" prop="">
//当设置router模式后index相当于to

2-3.关于default-active=>设置导航栏激活默认页面

复制代码

 :default-active="$route.path"

2-4.引入Message消息框

main.js

复制代码

import { message } from 'element-ui'
Vue.prototype.$message = message //安装$message

2-5 关于对话框dialog

使用前单独设置为组件
dialogVisible控制弹窗的显示和隐藏
before-close属性控制弹窗的关闭

2-6 关于Tree控件

使用前单独设置为组件,主要用于表单内的选择
逻辑：将选择的lable值传递给想要展示的组件
@node-click="handleNodeClick"

3.一些写代码的思路

3-1.改变非自身组件的数据时的一个思路

思路：数据在哪里，当要执行事件改变数据时，就想着往有数据的地方传东西

3-2组件在哪就在哪修改样式