当前位置:   article > 正文

Element给el-table设置样式_element table 样式

element table 样式

 <el-table

        :data="tableData"

//列表样式

        :cell-style="tableRowStyle"

//列表标题样式

        :header-cell-style="tableHeaderColor"

        style="width: 100%; overflow-y: auto"

        highlightCurrentRow="{true}"

        stripe="{true}"

      >

        <el-table-column

          type="selection"

          label="审核状态"

          width="46"

          align="center"

        >

        </el-table-column>

        <!-- <el-table-column prop="auditStatus" label="审核状态" width="180">

    </el-table-column> -->

        <el-table-column

          prop="serialNumber"

          type="index"

          width="55"

          label="序号"

          align="center"

        >

        </el-table-column>

        <el-table-column prop="deviceSerialization" label="设备序列化">

        </el-table-column>

        <el-table-column prop="devicename" label="设备名称"> </el-table-column>

        <el-table-column prop="registeredUser" label="注册用户">

        </el-table-column>

        <el-table-column prop="deviceType" label="设备类型"> </el-table-column>

      </el-table>

样式设置放在methods里面

  methods: {

    //设置表格行的样式

    tableRowStyle() {

      return "background-color:white;font-size:10px; color:black;text-align:center";

    },

    //设置表头行的样式

    tableHeaderColor() {

      //font-wight:500;font-size:20px;

      return "background-color:cadetblue;color:black;text-align:center";

    },

  },

最终实现效果:

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/113754
推荐阅读
相关标签
  

闽ICP备14008679号