本节课完成用户列表表单设计,使用table组件,同样模块化组件,CommonTable.vue组件,并且在User页面中引入,mock实现数据模拟,最终完成用户列表多项功能,实现新增,搜索,编辑,删除功能。
首先是基本信息页面el-table的data属性用于接收table的外部数据tableData,因此添加props,类型是Array,高度90%,stripe属性表示斑马条纹样式。el-table-column表示表头和第一行的内容,后面数据可以循环使用。show-overflow-tooltip表示过长数据用tooltip样式显示。props添加tableLabel,类型为Array,v-for遍历tableLabel(姓名、年龄、性别、出生日期、地址),label就主键名,设置宽度width,如果数据自带宽度就使用item.width,没有则设置125。,这是一个固定写法。slot是插槽,有两个重要性质,显示或不显示、怎样显示都是由父组件决定。{{ scope.row[item.prop] }}拿到列的数据并进行渲染。
接下来操作页,表头显示“操作”,表内显示“编辑、删除”。el-table-column下存在两个button。两个button都要设置点击事件,用函数方式。
分页组件使用Pagination组件,在el-table下方添加el-pagination,layout属性,total表示总的数据的数量。在props添加config,total是config下的一个属性,类型是Object。current-page.sync表示当前的页面数,添加点击事件changePage。page-size表示一页里有多少条数据,这里设置20。
更改样式,表格相对定位,页数绝对定位。
{{ scope.row[item.prop] }}
编辑
删除
引入
import CommonTable from '../../src/components/CommonTable.vue'
components:{
CommonTable
},
编写数据上传函数,row、page表示数据提交的数据,$emit可以将数据提交到父组件,edit、del、changePage为自定义名称。
methods: {
handleEdit(row) {
this.$emit('edit',row)
},
handleDelete(row) {
this.$emit('del',row)
},
changePage(page) {
this.$emit('changePage',page)
}
},
正式使用组件
tableData:[],
tableLabel:[
{
prop:"name",
label:"姓名"
},
{
prop:"age",
label:"年龄"
},
{
prop:"sexLabel",
label:"性别"
},
{
prop:"birth",
label:"出生日期",
width:200
},
{
prop:"addr",
label:"地址",
width:320
},
],
config:{
page:1,
total:30,
},
}
},
editUser(){
},
delUser(){
},
getList(){
}
mockServeData文件夹中提前放入user.js文件,在网盘链接里有(链接在第五节课),在tableData需要用mock引入,用mock生成数据。在mock.js中进行拦截ajax,getUserList是User.js的函数,这里写的是拦截器。
Mock.mock(/user\/getUser/,'get',userApi.getUserList)
在data.js调用mock拦截器,拦截器和接口调用要一致。
export const getUser = (params) => {
return axios.request({
url:'/user/getUser',
method:'get',
params
})
}
回到页面对接口就进行引入调用。
import { getUser } from '../../api/data'
在getList()调用,传入参数name,name默认为空。判断name存不存在,如果name存在,那么将当前页码置为1。如果不存在,页码置空。
getList(name=''){
this.config.loading = true
name ? (this.config.pag = 1) : ''
getUser({
page:this.config.page,
name
}).then(({ data:res })=>{
console.log(res,'res')
this.tableData = res.list.map(item=>{
item.sexLabel = item.sex === 0 ? "女" : "男"
return item
})
this.config.total = res.count
this.config.loading = false
})
}
添加生命周期对getList()方法进行调用
created(){
this.getList()
},
在confirm()发最后调用getList()函数。
confirm(){
if(this.$operateType === 'edit'){
this.$http.post('/user/edit',this.operateForm).then(res => {
console.log(res)
this.isShow = false
this.getList()
})
}else{
this.$http.post('/user/add',this.operateForm).then(res => {
console.log(res)
this.isShow = false
this.getList()
})
}
},
定义editUser()
editUser(row){
this.operateType = 'edit'
this.isShow = true
this.operateForm = row
},
定义delUser(),接收参数$confirm,第一个参数是提示内容,第二个参数是提示标题,第三个是参数是按钮文本,弹窗类型为warning。箭头函数,拿到当前数据,拿到id,调用api进行删除,删除api为"/user/del",并且需要传入数据的id,给出提示信息,并且调用getList。
delUser(row){
this.$confirm("此操作将永久删除该文件,是否继续?","提示",{
confirmButtonText:"确认",
canceIButtonText:"取消",
type:"warning"
}).then(()=>{
const id = row.id
this.$http.post("/user/del",{
params:{ id }
}).then(()=>{
this.$message({
type:'success',
message:'删除成功'
})
this.getList()
})
})
},
定义mock删除,deleteUser为mock里user.js的函数
Mock.mock(/user\/del/,'post',userApi.deleteUser)
页面效果
添加searchFrom.keyword即可,sharchFrom之前有定义过,里面的keyword字段默认为空。
搜索
效果
编辑功能显示信息
在点击编辑时调用handledit,这里需要用拿到数据,然后将原有的两个button放在template里面。
删除功能
此时点击删除功能是没有反应的,需要添加MessageBox、Message组件,!!!请注意,就是之前是全局引入,这里也必须单独引入MessageBox、Message(原因未知)。并且绑定到prototype属性上。
import { Message,MessageBox } from 'element-ui';
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$message = Message
至此,用户列表页面全部完成。