el-table頭部添加元素

1、html部分:

      <el-table ref="PendingTable" :data="projectsInfo" style="border-radius:5px;" :header-cell-style="{'border-bottom':'solid 1px #d2d3da'}">
        <el-table-column fixed="left" width="50">
          <template slot-scope="scope">
            <el-checkbox :key="scope.$index"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="proj_id" label="工程ID" :render-header="renderHeader">
        </el-table-column>
    </el-table>

 2、js部分:

    methods: {
      renderHeader(h, {column}) { // h即爲cerateElement的簡寫,具體可看vue官方文檔
        return h(
          'div', [
            h('i', {
              class: 'el-icon-location',
              style: 'color:#409eff;margin-left:5px;'
            }),
            h('span', column.label),
          ],
        );
      },
    }

3、效果圖:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章