当前位置：首页 > Web前端 > HTML

UI框架系列-表格

时间：2023-03-28 16:29:20 HTML

一、自定义表格表头在开发过程中，你会遇到需要给表格表头添加图标样式的场景。您可以通过插槽添加标题样式。实现效果：2.表格右侧固定循环遍历表格时，固定属性fixed不能单独添加到列中，所以可以通过prop结合设置固定的fixed：列是固定在左边还是右边，true表示固定在左边，false表示不固定fixed：可选值true,left,right{{item.label}}

效果截图：3.表头过滤功能表在列中设置filtersfilter-method属性，开启列的过滤，filters是一个数组，filter-method是一个方法，它用来决定是否显示某些数据，会传入三个参数：value、row和columnfilterHandler(value,row,column){constproperty=column['property'];returnrow[property]===value;}通过设置过滤器过滤数据，filter-method方法会对过滤后的值进行过滤，但是在业务场景中，当前表值提供了两种过滤器reset和confirmation功能，如果需要的数据量太大，需要添加模糊查询，所以需要自定义过滤组件。1.定义搜索框

2。定义多个选择框效果截图：4.表格列表多选框Table-columntype：对应列的类型如果设置了selection，会显示一个多选框；如果设置了索引，则显示该行的索引（从1开始计算）；如果设置了expand，它将显示为可扩展按钮HTML：

{{item.label}}

{{row[item.column]}}JS代码：//jsdata(){return{tableData:[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄',isCheck:false},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1517弄',isCheck:false},{date:'2016-05-01',name:'王小虎',address:'上海普陀区金沙江路1519弄',isCheck:false},{date:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路1516弄',isCheck:false}],header:[{column:'date',label:'time'},{column:'name',label:'name'},{column:'地址',label:'日期'},{column:'isCheck',label:'是否选择'}]}}实现效果：5.表格合并表头，行列1，合并表头通过给表格传递header-cell-style方法，表头单元格样式的回调方法，也可以使用一个固定的对象为所有表头单元格设置相同的样式Function({row,column,rowIndex,columnIndex})/Object内容：现实第一列和第二列表头合并html

方法一：js//jsmethods:{headMerge({row,column,rowIndex,columnIndex}){if(rowIndex===0&&columnIndex===0){this.$nextTick(()=>{if(document.getElementsByClassName(column.id).length!==0){document.getElementsByClassName(column.id)[0].setAttribute('colSpan',2);返回false}})返回列}//if(rowIndex===1&&（列umnIndex===0||columnIndex===1)){//返回{display:'none'}//}}}方法2:jsmethods:{setColSpan(){//console.log(document.getElementsByClassName("el-table__header"))//获取表头的所有单元格varx=document.getElementsByClassName("el-table__header")[0].rows[0].cells//将第二列表头单元格的colSpan设置为2x[1].colSpan=2//设置第三列表头单元格不显示x[2].style.display='none'}},mounted(){this.$nextTick(()=>{this.setColSpan();})}实现效果：2.合并行和列通过将span-method方法传递给表格，可以合并行或列。该方法的参数是一个对象，包含当前行row、当前Column列、当前行号rowIndex、当前列号columnIndex四个属性该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素元素代表colspan。还可以返回一个对象，其键名为rowspan和colspan。function({row,column,rowIndex,columnIndex})js//:span-method="objectSpanMethod"mounted(){//合并后的列是namethis.getSpanArr(data,'name')},methods:{objectSpanMethod({row,column,rowIndex,columnIndex}){//合并第一列的单元格if(columnIndex===0){const_row=this.spanArr[rowIndex]const_col=_row>0?1:0返回{rowspan:_row,colspan:_col}}},getSpanArr(data,key){this.spanArr=[]this.pos=''for(leti=0;i0?1:0}}}},getSpanArr(data){letobj={}for(letj=0;j

上一篇：冲锋战士-前端基础教程benchmark，新手必看，加油！

下一篇：为什么要控制风险？

UI框架系列-表格相关文章

最新推荐

猜你喜欢