提示：文章寫(xiě)完后，目錄可以自動(dòng)生成，如何生成可參考右邊的幫助文檔

vue+Element UI實(shí)現(xiàn)表格縱向顯示

前言

element框架的teble表格的數(shù)據(jù)展示由橫向轉(zhuǎn)向豎向，主要包括element框架的teble表格的數(shù)據(jù)展示由橫向轉(zhuǎn)向豎向使用實(shí)例、應(yīng)用技巧、基本知識(shí)點(diǎn)總結(jié)和需要注意事項(xiàng)，具有一定的參考價(jià)值，需要的朋友可以參考一下。

實(shí)現(xiàn)效果：其中左側(cè)和上測(cè)是固定內(nèi)容

<template>
    <!-- 表格 -->
    <div class="table_div">
      <el-table
        v-adaptive="{bottomOffset: 85}"
        height="100px"
        :data="tableData"
        stripe
        style="width: 100%"
        border
        row-key="index"
        @cell-click="cellClick"
      >
        <el-table-column
          v-for="(item, index) in tableHeaders"
          :key="index"
          :label="item.title"
          :prop="item.field"
          align="center"
          :width="item.width"
        >
          <template slot-scope="scope">
            <template v-if="index===0">
              <span v-if="index===0">{{ scope.row[index] }}</span>
            </template>
            <template v-else>
              <el-input
                v-if="index !==0 &&item.type==='textarea'"
                v-show="show"
                v-model="scope.row[index]"
                class="id"
                :autosize="true"
                type="textarea"
                @blur="loseFcous(scope.$index, scope.row)"
                @input="change"
              />
              <span v-show="!show">{{ scope.row[index] }}</span>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
      originTitle: ['我們目前所處領(lǐng)域', '我們希望達(dá)到的目標(biāo)', '與我們相關(guān)的主要機(jī)會(huì)', '目前我們遇到的最大挑戰(zhàn)', '客戶現(xiàn)在最優(yōu)先事情有那些', '如何幫助我們的客戶'], // originTitle 該標(biāo)題為 正常顯示的標(biāo)題, 數(shù)組中的順序就是上面數(shù)據(jù)源對(duì)象中的字段標(biāo)題對(duì)應(yīng)的順序
      /* 表頭信息 */
      tableHeaders: [
        { title: '', field: 'a1', width: 220, editRender: false },
        { title: '說(shuō)明', field: 'a2', type: 'textarea' },
        { title: '備注', field: 'a3', type: 'textarea' }
      ],
      /* 表格數(shù)據(jù) */
      tableData: [{
        a1: 'A1',
        a2: 'A2',
        a3: 'A3',
        a4: 'A4',
        a5: 'A5'
      },
      {
        a1: 'a1',
        a2: 'a2',
        a3: 'a3',
        a4: 'a4',
        a5: 'a5'
      }]
  },
  mounted() {
    this.transChange() // 轉(zhuǎn)化表格
  },
  methods: {
    // 轉(zhuǎn)換表格
    transChange() {
      // 數(shù)組按矩陣思路, 變成轉(zhuǎn)置矩陣
      const matrixData = this.tableData.map((row) => {
        const arr = []
        for (const key in row) {
          arr.push(row[key])
        }
        return arr
      })
      console.log(matrixData)
      // 加入標(biāo)題拼接最終的數(shù)據(jù)
      this.tableData = matrixData[0].map((col, i) => {
        return [this.originTitle[i], ...matrixData.map((row) => {
          return row[i]
        })]
      })
    },
    // 默認(rèn)顯示當(dāng)前年度
    getdatatime() {
      this.value1 = new Date()
    },
  }
}
</script>

總結(jié)

使用element-ui的el-table表格，頭部在左側(cè)需要進(jìn)行轉(zhuǎn)化，如果上側(cè)的頭部不需要可以設(shè)置隱藏。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-741190.html

到了這里，關(guān)于vue+Element UI實(shí)現(xiàn)表格表頭縱向顯示的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！