element ui 修改el-table的单元格样式

想要的效果:

 el-table的默认效果

 查看文档会发现element 自带属性可以修改样式。 header-cell-style用于修改头部样式

  <el-table
              :data="tableData"
              :cell-style="rowStyle"
              class="customer-table"
              :header-cell-style="{
                fontSize: '14px',
                color: 'rgba(0, 0, 0, 0.9)',
              }"
              style="width: 90%; margin: 0 auto; border: none"
            >
              <el-table-column prop="type" label="产品类型"> </el-table-column>
              <el-table-column prop="name" label="产品名称"> </el-table-column>
            </el-table>
          </div>
        </el-card>

其中的cell-style绑定事件来修改单元格样式

 //修改产品单元格的样式
    rowStyle({ row, column, rowIndex, columnIndex }) {
      if (column.label == "产品类型") {
        return " color: #666666;font-size: 12px;  line-height:40px; display:inline-block; background:#F6F6F6;border-radius:6px;width: 104px; height: 47px;";
      }
      if (column.label == "产品名称") {
        return " color: #666666;font-size: 12px;  line-height:40px; background:#F6F6F6;border-radius:6px;width: 199px; height: 40px;";
      }
    },