常见知识点说明
v-if和v-show的区别是什么呢?
1.v-if:是条件渲染,每次都会重新删除或者创建元素,v-if有较高的切换性能消耗。
2.v-show:每次不会重新进行DOM删除和创建操作,只是切换元素的display:none样式,有较高的初始渲染消耗。
提示:如果元素涉及到频繁的切换,最好不要使用v-if而用v-show,如果可能永远被用户看到则用v-if
------------------------------------------------------------------------------------------------------------------------------------------------------------------
跳转到某个页面
不带参数的跳转:
带参数的跳转:
-------------------------------------------------------------------------------------------------------------------------------------------------------------
输入框自动获取光标
第一种:
第二种:
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
v-for 要配合 :key 使用 不配合会报 警告
<el-table-column type="expand">
<template slot-scope='scope'>
<el-row :key="item.id" v-for="item in scope.row.children">
<el-col :span="3">
<el-tag @close="deleteRight(scope.row, item.id)" closable>{{item.authName}}</el-tag>
// scope.row,表示属于主管 这这一行下的标签 item.id 表示要关闭的标签的Id
<i v-if="item.children.length>0" class="el-icon-arrow-right arrow"></i> // 大于0 表示下面有子节点
</el-col>
<el-col :span="21">
<el-row class="authlist" :key="tag.id" v-for="tag in item.children">
<el-col :span="4">
<el-tag @close="deleteRight(scope.row, tag.id)" type="success" closable>{{tag.authName}}</el-tag>
<i v-if="tag.children.length>0" class="el-icon-arrow-right arrow"></i>
</el-col>
<el-col :span="20">
<el-tag @close="deleteRight(scope.row, btn.id)" :key="btn.id" type="warning" closable v-for="btn in tag.children">{{btn.authName}}</el-tag>
</el-col>
</el-row>
</el-col>
</el-row>
</template>
</el-table-column>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
前台页面表格里分别要求显示一级,二级,三级 但是后台返回的是字符串1,2,3 可用v-if
vue里可以这么写:
<el-table-column
prop="level"
width="180"
label="层级">
<template slot-scope='scope'>
<span v-if='scope.row.level === "0"'>一级</span>
<span v-else-if='scope.row.level === "1"'>二级</span>
<span v-else>三级</span>
</template>
</el-table-column>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Object.assign是什么意思啊?
let para=Object.assign({},this.editform);
使用到的地方有
1,编辑table的某一行的时候。获取哪一行的数据给编辑的表格。
handleEdit: function (index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
},
2,提交的时候。把data里面定义的一个对象赋值给一个变量,然后把这个变量传给后台。
let para = Object.assign({}, this.editForm);
editAffairtype(para).then((res) => {})
3.合并两个变量为一个。
let para={name:'1'};
let para2={name2:'1'};
let a=Object.assign(para,para2); //a就是{name:'1';name2:'1'}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
that.$refs['addForm'].resetFields(); 是什么意思啊?
报错解决
https://blog.csdn.net/u013675978/article/details/83536242
https://www.jianshu.com/p/6c77cd96a5f3
https://blog.csdn.net/abcde158308/article/details/80483073
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
通过 scope.row
获取每一行的数据,但是怎么获取每一行的索引呢?
<el-table max-height="290" :data="userTableData" border style="width: 100%">
<el-table-column label="序号">
<template slot-scope="scope">
{{scope.$index+1}}
</template>
</el-table-column>
<el-table-column prop="user_nickname" label="用户昵称">
</el-table-column>
<el-table-column prop="create_time" label="提交时间">
</el-table-column>
</el-table>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
router.push 和 router.replace 的区别
methods: {
toAddProduct () {
// 跳转到某个指定的页面
this.$router.push({name: 'add'})
},
editHandler (row) {
// 带着参数 跳转到某个指定的页面
this.$router.push({name: 'edit', params: {id: row.goods_id}})
},
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
gulp 和 webpack 的区别
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
element-UI之表格
<el-table
ref="multipleTable"
:data="tableData3"
tooltip-effect="dark" 设置溢出隐藏后,鼠标放入提示全部信息,这个指的是 那个提示框的背景颜色
border 整个表格带边框
style="width: 60%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection" 设置 多选框
width="100"> 设置每一列表格的宽度
</el-table-column>
<el-table-column
label="日期"
width="150">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip> 每一列设置溢出隐藏,鼠标放入提示全部信息
</el-table-column>
<el-table-column
prop="edit"
label="编辑"
show-overflow-tooltip>
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" @click="dialogVisible = true"></el-button>
<el-button type="primary" icon="el-icon-delete" @click="handleClick(scope.row)"></el-button> 设置图标样式
</template>
</el-table-column>
</el-table>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
@refresh="initList"
showEditForm (cid) {
// 编辑分类第一步
// 获取分类下拉列表数据
getCategories().then(res => {
if (res.meta.status === 200) {
this.ecateList = res.data
// 获取数据后调用获取分类信息接口
return getCateById({id: cid})
}
}).then(res => {
if (res.meta.status === 200) {
// 把数据填充到表单
this.ecate.cat_pid = res.data.cat_id
this.ecate.cat_name = res.data.cat_name
this.ecate.cat_level = res.data.cat_level
this.dialogVisible4Edit = true
}
})
},
refresh () {
console.log('fresh')
},
handleSizeChange (val) {
// 改变每页显示条数
this.pagesize = val
this.initList()
},
handleCurrentChange (val) {
// 改变当前页码
this.currentPage = val
this.initList()
},
initList () {
// 获取分类列表数据
getCategories({type: 3, pagenum: this.currentPage, pagesize: this.pagesize}).then(res => {
if (res.meta.status === 200) {
this.dataSource = res.data.result
this.pagesize = res.data.pagesize
this.total = res.data.total
}
})
}
},
跳转到某个页面
<div class="topbar-account topbar-btn">
<el-dropdown trigger="click">
<span class="el-dropdown-link userinfo-inner"><i class="iconfont icon-user"></i> {{nickname}} <i
class="iconfont icon-down"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<div @click="jumpTo('/user/profile')"><span style="color: #555;font-size: 14px;">个人信息</span></div>
</el-dropdown-item>
<el-dropdown-item>
<div @click="jumpTo('/user/changepwd')"><span style="color: #555;font-size: 14px;">修改密码</span></div>
</el-dropdown-item>
<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
在methods里
jumpTo(url){
this.defaultActiveIndex = url;
this.$router.push(url); //用go刷新
},
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
<el-table-column
prop="tag"
label="标签"
width="100"
:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
:filter-method="filterTag"
filter-placement="bottom-end">
<template slot-scope="scope">
<el-tag
:type="scope.row.tag === '家' ? 'primary' : 'success'"
disable-transitions>{{scope.row.tag}}</el-tag>
</template>
</el-table-column>
在methods里面
filterTag(value, row) {
return row.tag === value;
},