element-ui中如何给el-table的某一行或某一列加样式

yizhihongxing

要给 element-ui 的表格 el-table 的某一行或某一列加样式,可以使用 element-ui 提供的插槽(slot)功能。在插槽中可以通过 v-bind:class or v-bind:style 的形式给该行或该列中的元素加上需要的样式。

以下是详细的步骤:

1.使用 el-table 提供的 slot-scope 属性,并定义一个名为 scope 的参数:

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
  <el-table-column label="自定义列">
    <template slot-scope="scope">
      //此处为自定义列内容
    </template>
  </el-table-column>
</el-table>

在这里,我们将自定义列的内容放在了 \