哪家网站开发,公司网站要备案吗,google网站建设,s001网站建设element-ui 官方链接#xff1a;
组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/installation
el-select !-- 用户类型选择框template 看情况使用value选择框绑定的值 命名必须是value不能改v-foritem in Options options数据源来自于…element-ui 官方链接
组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/installation
el-select !-- 用户类型选择框template 看情况使用value选择框绑定的值 命名必须是value不能改v-foritem in Options options数据源来自于数据库查询的对象数组包含id和roleName:keyitem.id 确保每个列表项都有唯一的id这样就不会出现重复的元素:labelitem.roleName 显示的内容:valueitem.id 选项的值--templateel-select v-modelvalue placeholder请选择用户类型el-optionv-foritem in userTypeOptions:keyitem.id:labelitem.roleName:valueitem.id/el-option/el-select/template userTypeOptions后端响应的对象数组数据 el-table 和 el-switch !-- max-height420设置表格最大宽度超过宽度会有滚动条 :datatableData 绑定的数组数据 stylewidth: 100% 宽度继承父盒100%--el-table max-height420 :datatableData stripe stylewidth: 100%!-- 每一列 数组每一个元素对象(每一行)的属性 注意要与tableData的对象属性一致否则不显示 width160设置该列宽 --!-- 显示编号 别用数据库中的id代替 --el-table-column label编号 width140template slot-scopescope{{ scope.$index 1 }}/template/el-table-columnel-table-column propuserType label用户类型 width160/el-table-columnel-table-column propaccount label账号 width160/el-table-columnel-table-column propuserName label用户名 width160/el-table-columnel-table-column propctime label创建时间 width160!-- template slot-scopescope 将该列设置成模板 然后用一个方法去格式化时间 可用可不用{{ formatDate(scope.row.createdTime) }}/template --/el-table-columnel-table-column propcreatedUserId label创建人id width120/el-table-columnel-table-column label状态 width100!-- slot-scope是一个作用域属性 scope是作用域名字使用该名字可以获取到该行表格的数据 --template slot-scopescope1!-- element-ui的开关组件 --!-- 绑定的开关状态1关0开 或者你绑定的值scope1.row.status该隐藏域的状态值 是布尔值是true关false开也行 按需求来changehandleAuthority(scope1.row)监听处理行数据当点击开关时scope1.row.status数据发生改变change事件会触发可以在方法中做你想做的事 比如异步请求--el-switchv-modelscope1.row.status :active-value1active-color#ff4949:inactive-value0inactive-color#13ce66changehandleAuthority(scope1.row)/el-switch/template/el-table-columnel-table-column label操作!-- slot-scope是一个作用域属性 scope是作用域名字使用该名字可以获取到该行表格的数据 --template slot-scopescope2el-button sizemini clickhandleEdit(scope2.$index, scope2.row)编辑/el-buttonel-buttonsizeminitypedangerclickhandleDelete(scope2.$index, scope2.row)删除/el-button/template/el-table-column/el-table 表格中添加模板的作用域实现 异步处理 监听status的状态 //监听启用禁用按钮的状态handleAuthority(row) {console.log(row);console.log(row.status);// 发送请求到后端来更新status值const newStatus row.status ? 1 : 0; // 反转status值this.updateUserStatus(newStatus, row.id);}, 权限修改异步处理: // //修改权限请求updateUserStatus(authority, userId) {//开始发送修改请求var url http://localhost:8080/qy/User/UpdateUserStatus/${authority}/${userId};var config {headers: {//配置请求表头防止后端接收不到data中的参数Content-Type: application/json,// 可以在这里添加其他的header配置},};this.axios.get(url, config).then((res) {console.log(修改成功, res);}).catch((rej) {//请求失败捕获console.log(rej);});}, el-pagination 分页 !-- 分页size-change处理 当前页条数的改变current-change处理 当前页的改变:current-pagepageNo 绑定当前页:page-sizes[7, 14, 21, 28] 绑定每页条数:page-sizepageSize 绑定当前页条数layouttotal, sizes, prev, pager, next, jumper 绑定布局:totaltotal 绑定总条数--el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagepageNo:page-sizes[7, 14, 21, 28]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totaltotalParam/el-pagination 几个监听函数与异步请求 methods: {//监听分页条数handleSizeChange(val) {console.log(每页 ${val} 条);this.pageSize val;this.selectUser();},//监听分页条数的改变handleCurrentChange(val) {console.log(当前页: ${val});this.pageNo val;this.selectUser();},//用户表全查方法selectUser() {console.log(查询);var url http://localhost:8080/qy/User/select;var userparam {userType: this.value,userName: this.likeUserUserName,account: this.likeUserAccount,};var pageParam {pageNo: this.pageNo,pageSize: this.pageSize,};var userDto {pages: pageParam,users: userparam,};userDto JSON.stringify(userDto);var data userDto;var config {headers: {//配置请求表头防止后端接收不到data中的参数Content-Type: application/json,// 可以在这里添加其他的header配置},};this.axios.post(url, data, config).then((res) {console.log(res);//使用res.data.data 获取自己封装的对象中的数据console.log(data, res.data.data);if (res.data.status 200) {//将响应数据存进数组this.tableData res.data.data.pages;//修改后端传递的用户类型// 使用forEach函数修改userType属性值this.tableData.forEach((item) {// eslint-disable-next-line no-prototype-builtinsif (item.hasOwnProperty(userType)) {// 在这里修改userType的值例如将其设置为新值4item.userType item.userType 1? 系统管理员: item.userType 2? 挂号员: 门诊医师;}});//接收数据库总条数this.totalParam res.data.data.total;}if (res.data.status -1) {//用户未登录重定向到登录页面this.$message.error(res.data.msg);this.$router.push(/login);}}).catch((rej) {//请求失败捕获console.log(rej);});},}, axios实现发送异步请求 el-dialog 弹窗 !-- 修改用户弹窗title编辑用户 弹窗主题:visible.syncdialogFormVisible 弹窗是否显示:modeleditForm 弹窗表单数据:rulesrules 表单验证规则--el-dialog title编辑用户 :visible.syncdialogFormVisibleel-form :modeleditForm!-- 隐藏域typehidden 隐藏inputnameid 绑定namev-modeleditForm.id 绑定表单idv-modeleditForm.userName 绑定表单用户名autocompleteoff 禁用浏览器自动填充敏感信息如密码--el-input typehidden nameid v-modeleditForm.id/el-inputel-form-item label用户名el-input v-modeleditForm.userName autocompleteoff/el-input/el-form-item/el-form!-- 表单底部clickdialogFormVisible false 关闭弹窗 此变量控制弹窗显示与关闭typeprimary iconel-icon-search 控制按钮的样式 两个属性都可以--div slotfooter classdialog-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clicksubmitForm确 定/el-button/div/el-dialog!-- 删除用户弹窗title删除用户 弹窗主题:visible.syncdialogFormVisible 弹窗是否显示--el-dialog title删除用户 :visible.syncdialogRemove width30%span确认要删除用户吗?/span!-- 表单底部clickdialogRemove false 关闭弹窗 此变量控制弹窗显示与关闭typeprimary iconel-icon-search 控制按钮的样式 两个属性都可以--span slotfooter classdialog-footerel-button clickdialogRemove false取 消/el-buttonel-button typeprimary clickdeleteSubmint确 定/el-button/span/el-dialog 监听弹窗 //监听修改代码弹窗handleEdit(index, row) {console.log(index, row);//将查询到的行数据显示到弹窗的表单里 默认显示this.editForm row;//显示对话框获取用户输入的信息this.dialogFormVisible true;},//监听删除代码弹窗handleDelete(index, row) {console.log(index, row);//将查询到的行数据显示到弹窗的表单里 默认显示this.deleteForm row;//显示对话框获取用户输入的信息this.dialogRemove true;},
