wordpress积分券,seo推广效果怎么样,盐城市网站建设公司,WordPress导购模板需求
一个表单中存在子表 列表返回格式 实现
实现思路
el-table中在嵌套一个el-table#xff0c;这样数据格式就没问题了#xff0c;主要就是样式
将共同的列放到一列中#xff0c;通过渲染自定义表头render-header#xff0c;将表头按照合适的宽度渲染出来 el-…需求
一个表单中存在子表 列表返回格式 实现
实现思路
el-table中在嵌套一个el-table这样数据格式就没问题了主要就是样式
将共同的列放到一列中通过渲染自定义表头render-header将表头按照合适的宽度渲染出来 el-table-columnproptablelabel子表class-namehas-child:render-headerrenderHeader:widthchildColumn.length * 120 2 pxtemplate slot-scopescopeel-tableborder:datascope.row.detailsclasschild-table:show-headerfalseel-table-columnpropstartDatealigncenterlabel起始日期width120px/el-table-columnel-table-columnpropendDatealigncenterlabel结束日期width120px/el-table-columnel-table-columnpropapplyDayaligncenterlabel申请天数width120px/el-table-columnel-table-columnpropdestinationaligncenterlabel目的地width120px/el-table-columnel-table-columnproptransportationaligncenterlabel交通方式width120px/el-table-columnel-table-columnpropbusinessTripReasonaligncenterlabel出差事由width120px/el-table-columnel-table-columnpropreturnDatealigncenterlabel返程日期width120px/el-table-columnel-table-columnpropactualDayaligncenterlabel实际出差天数width120px/el-table-columnel-table-columnpropsubsidyDayaligncenterlabel差补天数width120px/el-table-columnel-table-columnpropremarkaligncenterlabel备注width120px/el-table-column/el-table/template/el-table-column根据数据渲染表头 childColumn: [{label: 起始日期,width: 120px,},{label: 结束日期,width: 120px,},{label: 申请天数,width: 120px,},{label: 目的地,width: 120px,},{label: 交通方式,width: 120px,},{label: 出差事由,width: 120px,},{label: 返程日期,width: 120px,},{label: 实际出差天数,width: 120px,},{label: 差补天数,width: 120px,},{label: 备注,width: 120px,},],/*** description 渲染子表*/renderHeader(h, { column, $index }) {const childTable this.childColumn.map((item) {return h(div,{style: {width: item.width,padding: 0 10px,textAlign: center,flexShrink: 0,flexGrow: 0,},},item.label);});return h(div,{class: [child-head],},childTable);},调样式慢慢调到合适就行
.has-child {padding: 0px !important;// display: none; .cell {padding: 0 !important;}::before {height: 0;}.child-table {background-color: transparent;.cell{line-height: 34px;}}.el-table--enable-row-hover .el-table__body tr:hover td.el-table__cell {background-color: transparent;}.el-table__body tr.current-row td.el-table__cell,.el-table__body tr.selection-row td.el-table__cell {background-color: transparent;}tr {background-color: transparent;}.child-head {display: flex;}
}完整代码
templatedivSearch :configsearchConfig searchsearchel-button typeprimary clickaddItem iconel-icon-plus新增/el-button/Searchel-tableborder:datatableDatav-loadingloadingclassel-child-tableel-table-columnpropapplyDatelabel申请日期aligncenterwidth120px/el-table-columnel-table-columnpropnickNamelabel申请人aligncenterwidth140px/el-table-columnel-table-columnpropdeptNamelabel申请部门aligncenterwidth120px/el-table-columnel-table-columnproptablelabel子表class-namehas-child:render-headerrenderHeader:widthchildColumn.length * 120 2 pxtemplate slot-scopescopeel-tableborder:datascope.row.detailsclasschild-table:show-headerfalseel-table-columnpropstartDatealigncenterlabel起始日期width120px/el-table-columnel-table-columnpropendDatealigncenterlabel结束日期width120px/el-table-columnel-table-columnpropapplyDayaligncenterlabel申请天数width120px/el-table-columnel-table-columnpropdestinationaligncenterlabel目的地width120px/el-table-columnel-table-columnproptransportationaligncenterlabel交通方式width120px/el-table-columnel-table-columnpropbusinessTripReasonaligncenterlabel出差事由width120px/el-table-columnel-table-columnpropreturnDatealigncenterlabel返程日期width120px/el-table-columnel-table-columnpropactualDayaligncenterlabel实际出差天数width120px/el-table-columnel-table-columnpropsubsidyDayaligncenterlabel差补天数width120px/el-table-columnel-table-columnpropremarkaligncenterlabel备注width120px/el-table-column/el-table/template/el-table-columnel-table-columnpropprocessStatusNamewidth120pxlabel状态aligncenter/el-table-columnel-table-column label操作 aligncenter width100px fixedrighttemplate slot-scope{ row }!-- 1、状态为被退回 2、申请人为当前登陆人 --el-buttonv-ifrow.approveJurisdiction 1typetextclickapproval(row)审批/el-buttonel-buttontypetextclickcheck(row)v-ifrow.checkJurisdiction 1核定/el-buttonel-buttonv-ifrow.processStatusName 被退回 row.nickName $store.state.user.nickNametypetextclickeditItem(row)修改/el-buttonel-button typetext clickviewItem(row)查看/el-button/template/el-table-column/el-tablepagination:totalpageInfo.total:page.syncpageInfo.pageNum:limit.syncpageInfo.pageSizepaginationgetList/DialogForm refdialogFormRef successsubmitSuccess/DialogForm/div
/templatescript
import Search from /components/Search/index.vue;
import DialogForm from ./components/form.vue;
import { checkRole } from /utils/permission;
import {apiGetBusinessTripList,apiGetStatusOption,
} from /api/businessTrip/index;export default {name: BusinessTrip,components: {Search,DialogForm,},data() {return {searchConfig: [{label: 申请日期,prop: publishTime,type: daterange,},{type: select,label: 状态,prop: processStatus,option: [],},{type: input,label: 模糊查询,prop: queryCondition,},],pageInfo: {pageNum: 1,pageSize: 10,total: 0,},tableData: [],childColumn: [{label: 起始日期,width: 120px,},{label: 结束日期,width: 120px,},{label: 申请天数,width: 120px,},{label: 目的地,width: 120px,},{label: 交通方式,width: 120px,},{label: 出差事由,width: 120px,},{label: 返程日期,width: 120px,},{label: 实际出差天数,width: 120px,},{label: 差补天数,width: 120px,},{label: 备注,width: 120px,},],disabled: true,currentItem: {},searchForm: {},loading: false,};},mounted() {this.getStatusOption();this.toApproval();},activated() {this.getList();this.toApproval();},methods: {checkRole,/*** description 从首页过来自动打开弹窗*/toApproval() {const id this.$route.query.approvalId;const jumpType this.$route.query.jumpType;this.$nextTick(() {if (jumpType 21) {this.$refs.dialogFormRef.open(审批, id);} else if (jumpType 22) {this.$refs.dialogFormRef.open(核定, id);}});},search(form) {this.searchForm form;this.getList();},getList() {this.loading true;const params {...this.searchForm,...this.pageInfo,startApplyDate:this.searchForm.publishTime this.searchForm.publishTime[0],endApplyDate:this.searchForm.publishTime this.searchForm.publishTime[1],};Reflect.deleteProperty(params, publishTime);apiGetBusinessTripList(params).then((response) {this.tableData response.data.records;this.pageInfo.total response.data.total;}).finally(() {this.loading false;});},/*** description 获取流程状态下拉*/getStatusOption() {apiGetStatusOption().then((response) {this.searchConfig[1].option response.data.map((item) {return {label: item.name,value: item.id,};});});},addItem() {this.$refs.dialogFormRef.open(新增);},approval(row) {this.$refs.dialogFormRef.open(审批, row.id);},check(row) {this.$refs.dialogFormRef.open(核定, row.id);},editItem(row) {this.$refs.dialogFormRef.open(修改, row.id);},viewItem(row) {this.$refs.dialogFormRef.open(详情, row.id);},/*** description 渲染子表*/renderHeader(h, { column, $index }) {const childTable this.childColumn.map((item) {return h(div,{style: {width: item.width,padding: 0 10px,textAlign: center,flexShrink: 0,flexGrow: 0,},},item.label);});return h(div,{class: [child-head],},childTable);},submitSuccess() {this.$router.replace({ path: /businessTrip, query: {} });this.getList();},},
};
/scriptstyle langscss scoped/style
