elementUI 表格的个性化处理 合集

elementUI 表格的个性化处理 合集

1.表头样式

效果图如上

<el-table
        :data="tableTreeDdata"
        size="medium"
        v-loading="loading"
        element-loading-text="$t('action.loading')"
        :default-sort="{prop: 'date', order: 'descending'}"
        style="font-size:18px;border:1px solid #DEE1E7;"
        :header-cell-style="{background:'#DEE1E7','font-size':'18px','font-weight':'550',color:'#252525',height:'60px'}"
        :row-class-name="tableRowClassName"
      >

:header-cell-style="{}"即可对表头样式进行处理

2.行调用方法

如上图所示，第一行的颜色与其他行不同，这个行调用方法是如何实现的呢

<el-table
            :data="restData"
            size="medium"
            v-loading="loading"
            style="width: 100%;border:1px solid #DEE1E7;padding-left:1px"
            :header-cell-style="{background:'#577ABC','font-size':'14px','font-weight':'550',color:'#FFFFFF',height:'35px'}"
            element-loading-text="$t('action.loading')"
            :row-class-name="tableRowClassName"
          >

:row-class-name="tableRowClassName"就是表格的行调用方法
js代码如下：

tableRowClassName({ row, rowIndex }) {
      if (row.flag == 1) {
        return "isusing";
      } else {
        return "notusing";
      }
    },

值不同，返回的class样式也不同

3.某一列数据处理

如上图所示，状态一列，后台传过来的数据是0和1，列表里却要显示已修复和未修复，代码如下：

<el-table-column prop="reslove" header-align="center" align="center" label="状态" :formatter="reslove" ></el-table-column>

通过:formatter调用方法进行处理，方法如下：

// 判断状态
    reslove: function(row, column, cellValue, index) {
      if (row[column.property] == 1) {
        return "已修复";
      } else if (row[column.property] == 0) {
        return "未修复";
      } else {
        return "";
      }
    },

4.表格中插入图片和文字

如上图所示，表格中既有图片又有文字，代码如下：

       <el-table-column prop="device1" header-align="center" align="center" label="温度">
          <template slot-scope="scope">
            <img :src="imgurl2" alt class="environImg2" />&nbsp;&nbsp;
            <span>{{scope.row.device1}}</span>
          </template>
        </el-table-column>

以上便是我对于elementui表格个性化的几点学习心得，欢迎分享与讨论！