代码收藏家 深入理解前端基础知识
1.创建工作区步骤
2.es6基础
3. vue
vue的生命周期
axios
切换nodejs
- 下载npm
- 下载需要的nodejs （nvm install 10.23.0 ） ，然后 use 选择下载的nodejs （ nvm use 10.23.0 ）
初始化项目
修改成本地的
修改访问接口
修改为：
代码编写
举例说明：
- 勾选复选框
- 点击批量删除
发生的请求：
<template>
<div class="app-container">
<!--查询表单-->
<div class="search-div">
<el-form label-width="70px" size="small">
<el-row>
<el-col :span="24">
<el-form-item label="部门名称">
<el-input style="width: 100%" v-model="searchObj.name" placeholder="部门名称"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row style="display:flex">
<el-button type="primary" icon="el-icon-search" size="mini" :loading="loading" @click="fetchData()">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
<el-button type="success" icon="el-icon-plus" size="mini" :disabled="$hasBP('bnt.sysRole.add') === false" @click="add">添 加</el-button>
<el-button class="btn-add" size="mini" @click="batchRemove()" >批量删除</el-button>
</el-row>
</el-form>
</div>
<!-- 表格 -->
<el-table
v-loading="listLoading"
:data="list"
stripe
border
style="width: 100%;margin-top: 10px;"
@selection-change="handleSelectionChange"> // 将复选框所在的值进行传递
<el-table-column type="selection"/> // 复选框
<el-table-column
label="序号"
width="70"
align="center">
<template slot-scope="scope">
{{ (page - 1) * limit + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="name" label="部门名称" />
<el-table-column prop="leader" label="负责人"/>
<el-table-column prop="phone" label="电话" />
<el-table-column prop="createTime" label="创建时间"/>
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改"/>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除"/>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<el-pagination
:current-page="page"
:total="total"
:page-size="limit"
:page-sizes="[5, 10, 20, 30, 40, 50, 100]"
style="padding: 30px 0; text-align: center;"
layout="sizes, prev, pager, next, jumper, ->, total, slot"
@current-change="fetchData"
@size-change="changeSize"
/>
<!-- dialogVisible 这个值true 或 false 决定是否弹框 -->
<el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%" >
<el-form ref="dataForm" :model="sysdept" label-width="150px" size="small" style="padding-right: 40px;">
<el-form-item label="部门名称">
<el-input v-model="sysdept.name"/>
</el-form-item>
<el-form-item label="上级部门名称" prop="roleName ">
<el-select v-model="sysdept.roleName" clearable>
<el-option v-for="item in iconList" :key="item.name" :label="item.name" :value="item.name">
<span style="padding-left: 6px;">{{ item.name }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="负责人">
<el-input v-model="sysdept.leader"/>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="sysdept.phone"/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
<el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
//引入定义接口js文件
import api from '@/api/system/sysDept'
export default {
//vue代码结构
//初始值
data() {
return {
list:[],//角色列表
page:1,//当前页
limit:10,//每页显示记录数
total:0,//总记录数
searchObj:{},//条件对象
selections:[],//多个复选框值
sysdept:{},//封装表单角色数据
dialogVisible:false, //是否弹框
iconList: []
}
},
created() { //渲染之前执行
this.fetchData()
},
methods:{
//选择复选框，把复选框所在行内容传递
handleSelectionChange(selection) {
this.selections = selection
console.log(this.selections)
},
batchRemove(){
var length = this.selections.length
if(length == 0){
this.$message.warning('请选择你要删除的数据')
return
}
this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
var idList = [] ;
this.selections.forEach( item => {
var id = item.id
idList.push(id)
});
api.batchRemove(idList).then(response => {
this.$message.success(response.message || '操作成功')
this.fetchData()
})
})
},
// 当页码发生改变的时候
changeSize(size) {
console.log(size)
this.limit = size
this.fetchData(1)
},
fetchData(current=1) { // 没有传递值，默认等于1 ，
this.page = current
api.getPageList(this.page,this.limit,this.searchObj)
.then(response => { //得到接口返回的数据 response响应体
this.list = response.data.records
this.total = response.data.total
// this.fetchData()
})
},
resetData(){
this.searchObj.name = null ;
this.fetchData()
},
add(){
this.dialogVisible = true ;
api.queryNmae().then(response => {
this.iconList = response.data ;
})
},
saveOrUpdate(){
//根据id判断
if (!this.sysdept.id) {//添加
this.save()
} else {//修改
this.update()
}
},
save(){
api.saveRole(this.sysdept)
.then(response => {
this.sysdept = {}
//提示
this.$message.success(response.message || '操作成功')
//关闭弹框
this.dialogVisible = false
//刷新页面
this.fetchData()
})
},
update(){
api.updateById(this.sysdept)
.then(response => {
this.sysdept = {}
//提示
this.$message.success(response.message || '操作成功')
//关闭弹框
this.dialogVisible = false
//刷新页面
this.fetchData()
})
},
edit(id){
this.dialogVisible = true
api.queryid(id).then(response =>{
this.sysdept = response.data
})
},
removeDataById(id){
api.removid(id).then(response =>{
this.$message.success(response.message || '操作成功')
this.fetchData()
})
}
}
}
</script>
token放入请求头
