el-table 隔行变色
时间: 2023-08-19 19:07:43 浏览: 107
用js、css实现table间隔行不同色.pdf
要实现 el-table 隔行变色,你可以使用 el-table 的 stripe 属性。stripe 属性为 true 时,表格的行会隔行变色。你可以在 el-table 上添加 stripe 属性来实现隔行变色的效果。
示例代码如下:
```html
<template>
<el-table :data="tableData" stripe>
<!-- 表格列定义 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' },
// 更多数据...
]
};
}
};
</script>
```
在上面的示例代码中,通过在 el-table 上添加 stripe 属性,即可实现表格的隔行变色效果。同时,你需要将表格的数据传递给 el-table 的 data 属性。
这样就可以实现 el-table 的隔行变色了。希望能对你有帮助!如果还有其他问题,请随时提问。
阅读全文