2、Element企业开发表格系列

---

1、表格默认选中一行

element属性：setCurrentRow

方法名	说明	参数
setCurrentRow	用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。	row

效果图

---

默认选中第二行：

1、el-table加高亮属性：highlight-current-row

// table 是表格数据

this.$nextTick(function () {
        this.$refs.tableData.setCurrentRow(this.tableData[2]);
});

---

二、css修改表格样式

效果图

自定义斑马线

              // 表格
              <div class="tableCss">
                <el-table
                  :data="tableData"
                  :row-class-name="tableRowClassName"
                  highlight-current-row
                >
                  <el-table-column
                    label="在线"
                    show-overflow-tooltip
                    align="center"
                  >
                    <template>
                      <img src="../../../assets/ok.png" />
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              
              // 斑马线
              tableRowClassName({ row, rowIndex }) {
                let index = rowIndex + 1;
                if (index % 2 == 0) {
                  return "warning-row";
                }
              },           

自定义图片样式

/* 公共表格样式 */
/* 表格 */
/* .tableCss .el-table {
                 border-top-left-radius: 25px;
                 border-top-right-radius: 25px;
               } */
/* 表头 */
.tableCss .el-table th {
    font-family: MicrosoftYaHeiUI;
    font-size: 14px;
    font-weight: 900;
    line-height: 44px;
    background-color: #f3fffb;
    color: #000;
    padding: 0;
}

/* 表格线 */
.tableCss .el-table td {
    border-bottom: none;
    padding: 0;
}

.tableCss .el-table::before {
    width: 0;
}

.tableCss .el-table th.is-leaf {
    border-bottom: none;
}

/* 行内 */
.tableCss .el-table .cell {
    line-height: 44px;
    padding: 0;
}

/* 斑马线颜色 */
/* .tableCss .el-table  tr {
              background-color: #f0f0f0;
            } */
.tableCss .el-table .warning-row {
    background-color: #f3fffb;
}

/* 选中，鼠标悬停 */
.tableCss .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #c6daee !important;
    color: #000;
}

.tableCss .el-table__body tr.current-row>td {
    background-color: #c6daee !important;
    color: #000;
}

---