el-table 表格横向展示 ,表头加toolTip展示

两种写法:

• 第一种(表头自己在外面添加的)
  

<el-table width="100%" :data="transData" v-loading="loading" border>
    <el-table-column v-for="(item, index) in transTitle" :label="item" :key="index" align="center" show-overflow-tooltip>
               <template slot-scope="scope"> {{scope.row[index]}} </template>
   </el-table-column> 
</el-table>


 transData:[],
 transTitle:['  ' , '第一项','第2项','第3' ],

list:[{  id:'第一项',  salary:'200.00'} ,{  id:'第二项',  salary:'200.00'} ,{  id:'第三项',  salary:'200.00'} ,{  id:'第一项',  salary:'200.00'} ]


 let matrixData = this.basicInfo.salaryList.map((row) => {
            console.log('row',row);
                let arr = []
                for (let key in row) {
                    console.log('key',key);
                    arr.push(row[key])
                    console.log('arr',arr);
                }
                return arr
            })
            console.log('matrixData',matrixData)
            // 加入标题拼接最终的数据
            this.transData = matrixData[0].map((col, i) => {
                return [this.basicInfo.salaryList[i], ...matrixData.map((row) => {
                    console.log('maop',this.basicInfo.salaryList[i],row);
                    return row[i]
                })]
            })
            console.log('this.transData',this.transData)

• 第二种(表头数据里自带的)
  

<el-table :data="tableData" v-loading="loading" border>                 
              <!--     :width="tableHead.length>5?200:''" -->
         <el-table-column  v-for="(item,index) in tableHead" :prop="item.salaryInfo" :key="index"  :label="item.id" min-width="120px" show-overflow-tooltip></el-table-column>           
</el-table>


tableData:[],
tableHead:[],

created(){
  this.getCrosswise(this.basicInfo.salaryList)
  }

methods: {
         //横向表格数据
        getCrosswise(list){
          let dataObj = {}
          list.map((e,index)=>{
            console.log('e',e);
            dataObj['salaryInfo' + index] = e.salaryInfo
            console.log('dataObj',dataObj);
            this.tableHead.push({
              id:e.id,
              salaryInfo:'salaryInfo' + index
            })
          })
          console.log('this.tableHead',this.tableHead);
          this.tableData.push(dataObj)
          console.log(' this.tableData', this.tableData);
        }
      }

添加 toolTip
在 添加 :render-header=“renderHeader”

超过7个文字显示toolTip

renderHeader(h, {column}) {
            if(column.label.length < 7){
                return h('span',[h('span', column.label)])
            } 
            return h('span', [
              h(  'el-tooltip', {
                  attrs: {
                    class: 'item',
                    effect: 'dark',
                    content: column.label,
                    placement: 'left-start',
                  },
                },
                [h('span', column.label)]
              )
            ])      
         },