table合并列，一对多的展示。

table合并列的操作

数据类型,合并的部分是在对象里的。

list: [{name: '1',twoList: [{name: '1.1'},{name: '1.2'}]}
]

html部分代码

     <template><div style="width 100%;"><table class="cus-table-box cus-table-sort" :style="{paddingRight: '16px', background: '#f4f4f4'}" cellspacing='0' cellpadding="0" style="width 100%;"><thead><th v-for="(item, index) in theadList" :key="index" :style="`width:${item.widthNum}`" :class="item.activeClass"><span>{{item.name}}</span><TooltipComm v-if="item.tooltipStr" :txt='item.tooltipStr' style="display:inline-block"/><span class="caret-wrapper" v-if="item.sort"><i class="sort-caret ascending"  @click="columnSort('asc', item)"></i><i class="sort-caret descending" @click="columnSort('desc', item)"></i></span></th></thead></table></div><div class="table-scrollHeight-box" :style="{overflowY: 'scroll', height: 'calc(100vh - 310px)'}"> <table class="cus-table-box" style="margin-top: -31px;border-right:0px" cellspacing='0'  cellpadding="0"><thead style="height:1px;opacity: 0"><th v-for="(item, index) in theadList" :key="index" :style="`width:${item.widthNum}`" :class="item.activeClass"><span>{{item.name}}</span></th></thead><tbody><tr v-for="(item, index) in list" :key="item.id"><td>{{index+1}}</td><td>{{item.oneCode}}</td><td>{{item.oneValue}}</td><td>{{item.oneOptStatusTxt}}</td><td colspan="4" style="padding:0px;border-right: 0px;"><table style="width: 100%;table-layout: fixed"  cellspacing='0'><tbody :key="item.twoList.length"><tr v-for="(ite, indexs) in item.twoList" :key="indexs"><td :style="{width: '23%',borderBottom: indexs == item.twoList.length-1? '0px' : '1px solid #EBEEF5;'}">{{ite.twoCode}}</td><td :style="{width: '22.7%',borderBottom: indexs == item.twoList.length-1? '0px' : '1px solid #EBEEF5;'}">{{ite.twoValue}}</td><td :style="{width: '22.7%',borderBottom: indexs == item.twoList.length-1? '0px' : '1px solid #EBEEF5;'}">{{ite.twoOptStatusTxt}}</td><td :style="{width: '5.4%',borderBottom: indexs == item.twoList.length-1? '0px' : '1px solid #EBEEF5;'}"><PermissionBtnDietype="bankAndBranch":isTable="true":parentRow="item":row="ite" :menuList="menuList"@editAndDetails="editAndDetails"></PermissionBtnDie></td></tr></tbody></table></td></tr></tbody></table></div></template><script>data () {return {// widthNum：宽度，sort：是否排序 ，prop：排序字段（后端排序）activeClass：排序的三角theadList: [{name: '序号', widthNum: '2%', sort: false, prop:'', },{name: '一级类型编码', widthNum: '12%', sort: true, prop:'oneCode', activeClass: ''},{name: '一级类型名称', widthNum: '12%', sort: true, prop:'oneValue', activeClass: '', tooltipStr: '一级状态为禁用时：FMS-【非供应链资金计划】-【新增】-资金计划类型中将不显示。'},{name: '一级状态', widthNum: '10%', sort: true, prop:'oneOptStatusTxt', activeClass: ''},{name: '二级类型编码', widthNum: '10%', sort: false, prop:''},{name: '二级类型名称', widthNum: '10%', sort: false, prop:''},{name: '二级状态', widthNum: '10%', sort: false, prop:'', tooltipStr: '二级状态全为禁用时，对应的一级状态自动变更为禁用，同时【非供应链资金计划】-【新增】时资金计划类型中将不显示。'},{name: '操作', widthNum: '3%', sort: false, prop:''},],}},methods: {// element的表格排序sortMixincolumn(column){const { col, order, prop } = column;this.searchForm.sortName = prop;this.searchForm.sortOrder = order?order==='descending'?'desc':'asc':'';this.search();console.log(order, prop);},// 自定义的合并表格排序columnSort (sortType, item) {let str = sortType + 'ending';let sortTypeCopy = sortType;this.theadList.forEach(ite => {if (ite.name == item.name) {if (ite.activeClass == str) {ite.activeClass = '';sortTypeCopy = '';} else {ite.activeClass = str;}} else {ite.activeClass = '';}});this.searchForm.sortName = item.prop;this.searchForm.sortOrder = sortTypeCopy;this.searchEvent();},}</script>

css部分代码

.cus-table-box {border: 1px solid #EBEEF5;position: relative;overflow: hidden;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;width: 100%;max-width: 100%;color: #303133;font-size: 12px;th {border-bottom: 1px solid #EBEEF5;border-right: 1px solid #EBEEF5;height: 31px;background: #f4f4f4;white-space: nowrap;padding: 0 20px;text-align: left;padding: 0 10px;color: #606266;// box-sizing: border-box;}.thead-tr {th:last-child {width: 180px!important;}}td {text-align: center;height: 31px;border-bottom: 1px solid #EBEEF5;word-wrap: break-word;padding: 0px 10px;color:#252525!important;border-right: 1px solid #EBEEF5;// box-sizing: border-box;}.cus-table-box th,td {text-align: left;}td :last-child {border-right: none!important;}
}
// 自定义表格的排序问题
.cus-table-sort {.caret-wrapper {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 34px;width: 24px;vertical-align: middle;cursor: pointer;overflow: initial;position: relative;}.sort-caret {width: 0;height: 0;border: 5px solid transparent;position: absolute;left: 7px;}.sort-caret.ascending {border-bottom-color: #C0C4CC;top: 5px;}.sort-caret.descending {border-top-color: #C0C4CC;bottom: 7px;}.ascending .sort-caret.ascending {border-bottom-color: #409EFF;}.descending .sort-caret.descending {border-top-color: #409EFF;}
}

排序合并项的宽度还是很不好处理，都是肉眼对的，无法兼容很多浏览器。

table合并列，一对多的展示。相关推荐

table 合并列_Table.Group相邻的两个数合并案例
本期案例是对相邻的两个不同的数进行合并,连续有多个相邻的数是相同的,则往后合并,直至使合并的非重复个数是两个为止,如果当前数与上一个数相同,则显示为空,合并后效果下:--源数据: {4,5,4,2,4 ...
elementui table 固定列_elementUI Table组件如何设置合并列
效果图: image.png 代码如下: :data="tableData" style="width:200px" :border="true&qu ...
table html 合并列,html table上下行合并
colspan 是合并列,rowspan是合并行,合并行的时候,比如rowspan="2",它的下一行tr会少一列:合并列的时候 colspan="2",此行的 ...
多种table列表合并列内容相同的单元格方法（原生table、layui-table、el-table
多种table列表合并列内容相同的单元格方法原生table html:<table class="tablelist" id="tablelist"&g ...
element UI table合并行合并列(整理)
效果图1: 图一 <template><div class="container"><el-table :data="dataSource& ...
layui框架实现table某一列的合并+冻结（合并列+fixed冻结二者发生冲突）
1.先实现的合并(百度上有很多),我用的是这个博主的京兆文鱼博主的:合并列的代码 2.对1中已经完成合并的这一列进行"冻结",我用的是layui框架自带的fixed属性(不知道的 ...
SQL Server 2005合并列成字符串 2008-11-07
SQL Server 2005合并列成字符串 2008-11-07 如果要将数据中的某一列合并成字符串,形成 A,B,C 这样的格式的话,一般性代码如下 DECLARE @str nvarchar(4 ...
SQL 合并列值和拆分列值
合并列值表结构,数据如下: view plain id value ----- ------ 1 aa 1 bb 2 aaa 2 bbb 2 ccc 需要得到结果: id values ------ ...
Impala中行转列在合并列
Impala中行转列在合并列 Impala中如何实现将多列转为一行,其实Impala中自带函数可以实现,不用自定义函数. 下面我开始演示: -bash-4.1$ impala-shell Starti ...

table合并列，一对多的展示。

table合并列，一对多的展示。相关推荐

最新文章

热门文章