常见知识点说明
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
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
}
})
}
},