el-table动态表头

dy1717

于 2024-09-29 14:15:21 发布

阅读量83

点赞数 2

分类专栏：工作遇到的bug 文章标签： javascript elementui

本文链接：https://blog.csdn.net/dy1717/article/details/142634124

版权

工作遇到的bug 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

需求：初始化数据表头固定，通过查询或者页面携带参数查询，将后端返回的新字段加到原有表头上回显

     <el-table
                ref="table"
                :data="tableData"
                :header-cell-style="{ background: '#F5F7FA', height: '30px' }"
                style="width: 100%; margin: 0 auto"
                height="100%"
                align="center"
                stripe
                row-key="id"
                border
                :row-class-name="tableRowClassName"
                @cell-click="tabClick"
              >
                <el-table-column
                  v-for="(item, index) in viewColumns"
                  :key="index"
                  :fixed="item.fixed"
                  :prop="item.prop"
                  :align="item.align"
                  :label="item.label"
                  :min-width="item.width"
                  :show-overflow-tooltip="true"
                />
    </el-table>

<script>
export default {

data() {
    return {
  viewColumns: [
        { prop: 'partLevel', width: '70', align: 'left', label: 'LEVEL', fixed: false },
        { prop: 'partNo', width: '120', align: 'left', label: '部品号', fixed: false },
        { prop: 'partName', width: '120', align: 'left', label: '部品名', fixed: false },
        { prop: 'partCName', width: '120', align: 'left', label: '部品中文名称', fixed: false },
        { prop: 'sec', width: '70', align: 'left', label: 'SEC', fixed: false },
        { prop: 'asmfunc', width: '120', align: 'left', label: '品目', fixed: false },
        { prop: 'peTypeOne', width: '70', align: 'left', label: '工順1', fixed: false },
        { prop: 'peType', width: '70', align: 'left', label: '工順2', fixed: false },
        { prop: 'pattern', width: '120', align: 'left', label: '初始式样', fixed: false },
        { prop: 'divType', width: '120', align: 'left', label: '初始区域', fixed: false }
      ],
      viewColumnsOne: [
        { prop: 'partLevel', width: '70', align: 'left', label: 'LEVEL', fixed: false },
        { prop: 'partNo', width: '120', align: 'left', label: '部品号', fixed: false },
        { prop: 'partName', width: '120', align: 'left', label: '部品名', fixed: false },
        { prop: 'partCName', width: '120', align: 'left', label: '部品中文名称', fixed: false },
        { prop: 'sec', width: '70', align: 'left', label: 'SEC', fixed: false },
        { prop: 'asmfunc', width: '120', align: 'left', label: '品目', fixed: false },
        { prop: 'peTypeOne', width: '70', align: 'left', label: '工順1', fixed: false },
        { prop: 'peType', width: '70', align: 'left', label: '工順2', fixed: false },
        { prop: 'pattern', width: '120', align: 'left', label: '初始式样', fixed: false },
        { prop: 'divType', width: '120', align: 'left', label: '初始区域', fixed: false }
      ],

     }  

   }
 
}




</scipt>

methods:{
//获取数据的方法
getTabelData(){

    const params = {page:this.page,pagesize:this.pagesize,xxxxx}

    queryData(params).then(res =>{
   if (res && res.rows && res.rows.length > 0) {
            if (String(this.page) === '1' && (JSON.stringify(res.rows[0].modelCount) !== '{}' || res.rows.modelCount !== undefined)) {
              this.oneList = JSON.parse(JSON.stringify(res.rows[0].modelCount)) // 获取静态列的数据
            }
            // 判断静态列有没有
            if (this.oneList) {
              let inSertColums = []
              this.viewColumnsOne = [
                { prop: 'partLevel', width: '70', align: 'left', label: 'LEVEL', fixed: false },
                { prop: 'partNo', width: '120', align: 'left', label: '部品号', fixed: false },
                { prop: 'partName', width: '120', align: 'left', label: '部品名', fixed: false },
                { prop: 'partCName', width: '120', align: 'left', label: '部品中文名称', fixed: false },
                { prop: 'sec', width: '70', align: 'left', label: 'SEC', fixed: false },
                { prop: 'asmfunc', width: '120', align: 'left', label: '品目', fixed: false },
                { prop: 'peTypeOne', width: '70', align: 'left', label: '工順1', fixed: false },
                { prop: 'peType', width: '70', align: 'left', label: '工順2', fixed: false },
                { prop: 'pattern', width: '120', align: 'left', label: '初始式样', fixed: false },
                { prop: 'divType', width: '120', align: 'left', label: '初始区域', fixed: false }
              ]
              for (const property in this.oneList) {
                inSertColums = [...inSertColums, { prop: property, width: '120', align: 'left', label: property, fixed: false }]
                res.rows.map((item) => {
                  item[property] = item.modelCount[property]
                })
              }
              inSertColums.forEach((item, index) => {
                this.viewColumnsOne.splice(Number(10), 0, item)
              })
              const obj = {}
              // this.viewColumns = this.viewColumnsOne.reduce((prev, cur) => {
              //   obj[cur.prop] ? '' : (obj[cur.prop] = true && prev.push(cur))
              //   return prev
              // }, [])
              this.viewColumns = this.viewColumnsOne.reduce((prev, cur) => {
                if (!obj[cur.prop]) {
                  obj[cur.prop] = true
                  prev.push(cur)
                }
                return prev
              }, []) //viewColumns最后获取到的就是拼接起来的表头数据
              this.tableData = res.rows
              this.total = res.rowcount
            }
            
        })
 }

}