asp.net搭建网站,wordpress 付费主题 高级功能编辑器,asp网站安全,湖北省住房和城乡建设部网站表格高度自适应 分页跟随表格之后 1. 满屏时出现滚动条 2. 不满屏时不显示滚动条 坑 表格设置maxHeight后不出现滚动条 解决方案 表格外层元素设置max-height el-table–fit 设置高度100% .table-box {max-height: calc(100% - 120px);
}
.el-table--fit {height: 100%;
}示例代… 表格高度自适应 分页跟随表格之后 1. 满屏时出现滚动条 2. 不满屏时不显示滚动条 坑 表格设置maxHeight后不出现滚动条 解决方案 表格外层元素设置max-height el-table–fit 设置高度100% .table-box {max-height: calc(100% - 120px);
}
.el-table--fit {height: 100%;
}示例代码
templatediv classouter-boxdiv classform-boxDymanicFormrefformRef:inlinetrue:schemaschemav-modelsearchValueel-form-itemel-button typeprimary clickhandleQuery查询/el-buttonel-button clickhandleReset重置/el-button/el-form-item/DymanicForm/divdiv classtable-boxTable:tableDatatableData:haveCheckBoxtrue:haveIndextrue:columnstableColumn:stripetrue:bordertruemax-height100%select-changehandleSelectChangerow-clickhandleRowClick//divdiv classpage-boxPagination:totaltotalv-model:currentPagequeryParams.currentPagev-model:currentSizequeryParams.currentSizepaginationhandleGetTableData//div/div
/template
script setup langts
import { ref, reactive } from vue;
import type { ItemSchema } from ~/types/dymanic;
import DymanicForm from ~/components/DymanicForm.vue;
import { ElMessage } from element-plus;const formRef refInstanceTypetypeof DymanicForm();
const schema refItemSchema({userId: {formItem: {label: 用户ID,},style: {width: 200px,},componentName: ElInput,placeholder: 请输入用户ID,maxlength: 20,},username: {formItem: {label: 账号,},style: {width: 200px,},componentName: ElInput,placeholder: 请输入账号,maxlength: 20,},name: {formItem: { label: 用户名 },style: {width: 200px,},componentName: ElInput,placeholder: 请输入用户名,maxlength: 20,},date: {formItem: {label: 日期,},style: {width: 200px,},componentName: ElDatePicker,type: daterange,startPlaceholder: 开始日期,endPlaceholder: 结束日期,},
});
const searchValue reactive({userId: ,username: ,name: ,
});
const handleQuery () {formRef.value.validate((valid: boolean) {if (valid) {console.log(查询, searchValue);// 查询逻辑}});
};const handleReset () {formRef.value.resetFields();
};const tableData ref([{date: 2016-05-03,name: Tom,address: No. 189, Grove St, Los Angeles,userid: 123456789,username: admin,password: 123456,role: 管理员,status: 正常,createTime: 2023-03-01 12:00:00,updateTime: 2023-03-01 12:00:00,remark: 备注,},{date: 2016-05-02,name: Tom,address: No. 189, Grove St, Los Angeles,userid: 123456789,username: admin,password: 123456,role: 管理员,status: 正常,createTime: 2023-03-01 12:00:00,updateTime: 2023-03-01 12:00:00,remark: 备注,},{date: 2016-05-04,name: Tom,address: No. 189, Grove St, Los Angeles,userid: 123456789,username: admin,password: 123456,role: 管理员,status: 正常,createTime: 2023-03-01 12:00:00,updateTime: 2023-03-01 12:00:00,remark: 备注,},{date: 2016-05-01,name: Tom,address: No. 189, Grove St, Los Angeles,userid: 123456789,username: admin,password: 123456,role: 管理员,status: 正常,createTime: 2023-03-01 12:00:00,updateTime: 2023-03-01 12:00:00,remark: 备注,},
]);const tableColumn reactive([{prop: date,label: 日期,width: 180,align: center,},{prop: name,label: 姓名,width: 180,align: center,},{prop: address,label: 地址,width: 280,align: left,},{prop: userid,label: 用户ID,width: 180,align: center,},{prop: username,label: 用户名,width: 180,align: center,},{prop: password,label: 密码,width: 180,align: center,},{prop: role,label: 角色,width: 180,align: center,},{prop: status,label: 状态,width: 180,align: center,},{prop: createTime,label: 创建时间,width: 180,align: center,},{prop: updateTime,label: 更新时间,width: 180,align: center,},{prop: remark,label: 备注,width: 180,align: center,},{prop: operation,label: 操作,width: 280,align: center,fixed: right,operate: [{label: 编辑,icon: Edit,type: primary,click: (row: any) {ElMessage.success(点击了编辑 row.name);},},{label: 删除,icon: Delete,type: danger,click: (row: any) {ElMessage.error(点击了删除 row.name);},},],},
]);const handleSelectChange (selection: any) {ElMessage.success(选择了 selection[0].name);console.log(selection);
};const handleRowClick (row, column, event) {ElMessage.success(点击了 row.name);console.log(row);console.log(column);console.log(event);
};const total ref(100);
const queryParams ref({currentPage: 2,currentSize: 30,
});
const handleGetTableData () {ElMessage.success(当前页${queryParams.value.currentPage}每页条数${queryParams.value.currentSize});console.log(queryParams.value);
};
/script
style langscss scoped
.outer-box {display: flex;flex-direction: column;height: 100%;width: 100%;
}
.form-box {height: 60px;display: flex;align-items: center;
}
.table-box {max-height: calc(100% - 120px);
}
.el-table--fit {height: 100%;
}
.page-box {height: 60px;display: flex;justify-content: flex-end;align-items: center;margin-top: 20px;
}
/style
