定制型网站一般价格,高德地图可以搜索国外吗,苏南网站建设,网站设置关于我们怎么做用户列表的实现与操作 一、创建用户页面和路由二、表格优化1、表头自定义2、表格滚动3、加入数据索引4、利用插槽自定义显示 三、功能1、查询功能3、增加4、删除5、修改 一、创建用户页面和路由
创建用户页面
在 src/components/Main 下创建文件夹user#xff0c;创建文件Us… 用户列表的实现与操作 一、创建用户页面和路由二、表格优化1、表头自定义2、表格滚动3、加入数据索引4、利用插槽自定义显示 三、功能1、查询功能3、增加4、删除5、修改 一、创建用户页面和路由
创建用户页面
在 src/components/Main 下创建文件夹user创建文件UserList.vue文件内容如下 页面中数据的请求代码: 定义方法getUserData使用axios 去请求数据并将请求的数据设置给userData。在created钩子函数中调用getUserData方法。 templateel-table:datauserDatastylewidth: 100%border:default-sort{ prop: date, order: descending }el-table-column propdate label日期 sortable width180/el-table-columnel-table-column propname label姓名 sortable width180/el-table-columnel-table-column propaddress label地址 /el-table-column/el-table
/templatescript
export default {name: UserList,data() {return {userData: [],};},methods: {getUserData() {this.$axios.post(/post/userList).then((res) {this.userData res.data.userData;});},},created() {this.getUserData();},
};
/scriptstyle scoped
.el-table {width: 100%;height: auto;
}
/style在之前使用的mockjs中将菜单数据进行修改然后加入用户管理的数据
Mock.mock(/post/menuList, get, function () {const menu_data [{name: 用户管理,icon: el-icon-user,path: /index/userList,component: user/UserList},{name: 一级菜单1,icon: el-icon-location,path: /index/menu1,component: Main1},{name: 一级菜单2,icon: el-icon-document,path: /index/menu2,component: Main2}]return {menu_data}
});Mock.mock(/post/userList, post, function () {const userData [{date: 2022-05-02,name: 牛3号,address: 北京市XXXXXX路1号,},{date: 2022-05-04,name: 牛4号,address: 北京市XXXXXX路2号,},{date: 2022-05-01,name: 牛5号,address: 北京市XXXXXX路3号,},]return {userData}
});页面效果
二、表格优化
1、表头自定义
el-table 增加属性 header-row-class-name 值为 table_header_class设置样式注意使用/deep/ .table-header-class th
参考代码
templateel-table:datauserDatastylewidth: 100%border:default-sort{ prop: date, order: descending }header-row-class-nametable-header-classel-table-column propdate label日期 sortable width180/el-table-columnel-table-column propname label姓名 sortable width180/el-table-columnel-table-column propaddress label地址 /el-table-column/el-table
/templatescript
export default {name: UserList,data() {return {userData: [],};},methods: {getUserData() {this.$axios.post(/post/userList).then((res) {this.userData res.data.userData;});},},created() {this.getUserData();},
};
/scriptstyle scoped.el-table {width: 100%;height: auto;
}/deep/ .table-header-class th{background-color: #91a8b1 !important;color: white;
}
/style页面效果
2、表格滚动
如果数据过多则需要加入表格滚动否则是外部滚动很难看这种情况处理起来比较简单在el-table加入max-height属性即可比如我设置值为500px
效果展示
3、加入数据索引
加入数据索引 给表格加上一列即可设置 type“index”
el-table-column typeindex width50/el-table-column4、利用插槽自定义显示
让数据看起来更显眼、分类更明确比如 userData 加了tag表示地址是工作地址还是家
el-table-column proptag label标签/el-table-column页面效果 只加个标签的话很平淡我们用插槽试一下
el-table-column proptag label标签template slot-scopescopeel-tag:typescope.row.tag 家 ? primary : successdisable-transitions{{ scope.row.tag }}/el-tag/template/el-table-column页面效果
三、功能
1、查询功能
页面添加搜索框和搜索按钮在table的前面加入代码在data里面定义search_name对应el-input的v-model
userList代码
templatediv idbutton_divel-inputidsearch-inputsizesmalllabel-width100pxprefix-iconel-icon-searchplaceholder请输入名字...v-modelsearch_namestyleheight: auto; width: 20%/el-inputnbsp;el-buttontypeprimarysizesmallclasssearch-buttonclicksearchstyleheight: auto搜索/el-buttonel-table:datauserDatastylewidth: 100%border:default-sort{ prop: date, order: descending }header-row-class-nametable-header-classclasscustom-table-heightmax-height500pxel-table-column typeindex width50 /el-table-columnel-table-column propdate label日期 sortable width180/el-table-columnel-table-column propname label姓名 sortable width180/el-table-columnel-table-column propaddress label地址 /el-table-columnel-table-column proptag label标签template slot-scopescopeel-tag:typescope.row.tag 家 ? primary : successdisable-transitions{{ scope.row.tag }}/el-tag/template/el-table-column/el-table/div
/templatescript
export default {name: UserList,data() {return {userData: [],search_name: ,};},methods: {getUserData() {this.$axios.post(/post/userList).then((res) {this.userData res.data.userData;});},search() {console.log(this.search_name,this.search_name)this.$axios.post(/post/searchUser, { name: this.search_name }).then((res) {console.log(name,name)this.userData res.data.userData;});},},created() {this.getUserData();},
};
/scriptstyle scoped
/* .el-table {width: 100%;height: 300px !important;
} *//deep/ .table-header-class th {background-color: #91a8b1 !important;color: white;
}
.custom-table-height {height: auto !important; /* 或指定一个固定高度例如 400px */
}
/stylemockjs代码
const userData [{date: 2022-05-02,name: 牛3号,address: 北京市XXXXXX路1号,tag: 家},{date: 2022-05-04,name: 牛4号,address: 北京市XXXXXX路2号,tag: 家},{date: 2022-05-01,name: 牛5号,address: 北京市XXXXXX路3号,tag: 家},
]
Mock.mock(/post/searchUser, post, function (param) {console.log(param,param.body);let body JSON.parse(param.body);let name body.name;let newData []if (name) {newData userData.filter((item) {console.log(*******,item.name.indexOf(name))return item.name.indexOf(name) -1;})console.log(eeee,newData)} else {newData userData;console.log(eeee2,newData)}return {userData: newData}
});测试如下
3、增加
4、删除
5、修改 休息一会继续补充~
