el-table居中-序号-透明背景色等

el-table文本居中 

 整个表格和内容居中的方式：

<el-table
            :data="tableData"
            stripe
            style="width: 100%"
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{ 'text-align': 'center' }"
          >
</el-table>

单个表格的内容居中:

<el-table-column label="xx" prop="xx" align="center">
</el-table-column>

---

el-table增加序号列

<el-table-column label="序号" width="100px" align="center">
     <template slot-scope="scope">
        {{ scope.$index + 1 }}
     </template>
</el-table-column>

---

el-table自定义背景颜色-字体样式等

将表格的背景色变成透明色： 

//一定要写在最外面!!!!

<style lang="scss" scoped>

  /*最外层透明*/
 ::v-deep .el-table,
 ::v-deep .el-table__expanded-cell {
    background-color: transparent !important;
}


/* 表格内背景颜色 */
 ::v-deep .el-table th,
 ::v-deep .el-table tr,
 ::v-deep .el-table td {
    background-color: transparent !important;
    border: 0; //去除表格
}
</style>

 修改表头和单元格内容的字体样式：

1.el-table修改表头样式：通过绑定header-cell-style属性进行实现
<el-table
    :data="tableData"
    stripe
    style="width: 100%"
    :header-cell-style="{ 'text-align': 'center',color: '#FFF' }">
</el-table>
2. el-table根据单元格内容动态修改单元格字体颜色

el-table添加属性:cell-style="cellStyle"，methods里写该方法

cellStyle({ columnIndex }) {
      // 状态列字体颜色
      if (columnIndex === 3) {
        return "color : #99F17A";
      }
}

多选改为单选

 html:

<el-table
ref="myTable'
:data="tableData"
border
Aselection-change="setSelectRows">
    <el-table-column type="selection" width="50"></el-table-column>
</el-table>

js:

export default {
data(){
    return {
        tableData: [],
        selectRows:[]
    }
}，
methods: {
//表格只能单选
setselectRows(selection) (
    this.selectRows = []
    if(selection.length==1){
    this.selectRows = [selection]
    }
    if (selection.length > 1) (
    this.$refs.myTable.clearSelection()
    this.$refs.myTable.toggleRowSelection(selection[selection.length - 1]
    this.selectRows = [selection[selection.length - 1]]
    }