el-table详细用法表头定义收起展开

原创已于 2024-01-27 14:28:46 修改

· 1k 阅读

10 ·

版权

文章标签：

#vue.js #javascript #elementui

于 2024-01-27 14:19:16 首次发布

本文介绍了如何使用Vue和ElementUI框架创建一个可定制的表格，包括自定义表头的展开与折叠，以及根据数据动态调整表头样式和行类名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-table 
//设置行
:row-class-name="mainTable.rowClassName"
//单元格
:cell-class-name="mainTable.cellClassName"
//header-cell-class-name和header-cell-style都是定义表头样式
:header-cell-class-name="mainTable.headerRowStyle"
:header-cell-style="mainTable.tableHeaderColor"
//斑马纹
:stripe="true"
header-align="center"
border
//绑定数据
:data="tableData"
style="width: 100%"
empty-text="没有数据"
//是否要高亮当前行
highlight-current-row
//是否在表尾显示合计行
show-summary
>
<el-table-column label="周期" prop="days" fixed="left">
//自定义表头 点击周期表头图标收起或者展开日期起止和节假日
   <template #header>
     <div :style="{ background: daysisShouqi ? '#CFE5FF' : '' }" class="away">
            <span>周期</span>
            <div @click="daysisShouqi = !daysisShouqi" >
                       <el-icon>
                                <ArrowRightBold />
                           </el-icon>
                       </div>
                    </template>
//自定义里面的内容样式
    <template #default="{ row }">
             <div class="away" :style="{ background: daysisShouqi ? '#CFE5FF' : '' }">{{ row.days }}</div>
                  </template>
 </el-table-column>
<el-table-column v-if="daysisShouqi" label="日期起止" prop="rqqz" width="150" fixed="left">
                </el-table-column>
<el-table-column v-if="daysisShouqi" label="节假日" prop="jjr"  fixed="left">
                </el-table-column>
</el-table>

const daysisShouqi = ref(false)

const mainTable = reactive({
    tableHeaderColor: ({ column }: { column: any }) => {
        const property = column.property
        switch (property) {
            case 'rqqz':
            case 'jjr':
                return {
                    backgroundColor: '#DDECFF'
                }
            
        }
    }, 
headerRowStyle:(obj: any)=> {
        if (obj.column.label == "人工调货") {
            return 'dgxxys';
        }
        if (obj.column.label == "订单池") {
            return 'ddxxys';
        }
},
    rowClassName: ({ row }: { row: any}) => {
        const className = ['child']
        if ( row.packstate == '异常') {
            className.push('marked')
        }
        return className
    },
    cellClassName: ({ row, column, columnIndex }: { row: any, column: any, columnIndex: any }) => {
      const property = column.property         
      if (property == 'shangxin_1') {
            return 'borderZu'
        }
        }
   
 
})