el-table（vue3 总结）

一 设置居中对齐

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

header-cell-style设置头部居中；cell-style设置单元格内容居中

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

1.2单个表格的内容居中：

只需要在el-table-column上加上align=‘center’

<el-table-column label="姓名" prop="realname" align="center">
  </el-table-column>

二设置头部样式（:header-cell-style）

  <el-table
        :data="userList"
        stripe
        :header-cell-style="{ background: '#F8F9FA', color: '#1D2129' }"
      >

三设置每一行的样式(row-style)

四索引

<el-table-column type="index" width="50" />

六多选

6.1 出现多选框

 <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column property="name" label="Name" width="120" />

 </el-table>



const multipleSelection = ref<User[]>([])

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

选中触发的事件@selection-change="handleSelectionChange"

6.2 选中触发的事件

五 vue中将 后台返回的0，1等 代码转换成 男，女等汉字。

vue中将 后台返回的0，1等 代码转换成 男，女等汉字。_vue2中01转化性别-CSDN博客