Vue 实现element 的 el-table 的表格类的样式绑定
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<template>
// 遍历表格
<div class="dormitoryData">
<el-table
ref="dormitoryTable"
:data="dormitory"
tooltip-effect="dark"
stripe
style="width: 100%">
<el-table-column type="selection" width="45"></el-table-column>
<el-table-column label="序号" type="index" width="65"></el-table-column>
<el-table-column label="人物" prop="people">
<template slot-scope="scope">
<div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.people }}</div>
</template>
</el-table-column>
<el-table-column label="关系" prop="relationship">
<template slot-scope="scope">
<div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.relationship }}</div>
</template>
</el-table-column>
<el-table-column label="初见" prop="meet">
<template slot-scope="scope">
<div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.meet }}</div>
</template>
</el-table-column>
<el-table-column label="地点" prop="place">
<template slot-scope="scope">
<div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.place }}</div>
</template>
</el-table-column>
<el-table-column label="昵称" prop="execg">
<template slot-scope="scope">
<div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.execg }}</div>
</template>
</el-table-column>
<el-table-column label="认识年限" prop="year">
<template slot-scope="scope">
<div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.year }}</div>
</template>
</el-table-column>
<el-table-column label="成名之作" prop="works">
<template slot-scope="scope">
<div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.works }}</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data () {
return {
dormitory: [{
people: '雷森',
relationship: '大学室友',
meet: '2010-09-02',
place: '图书馆',
execg: '胖子',
year: '8年',
works: '海阔天空',
isEdit: '1'
}, {
people: '刘利伟',
relationship: '大学室友',
meet: '2010-09-02',
place: '5#633',
execg: '老大',
year: '8年',
works: '勇气',
isEdit: '1'
}, {
people: '李金龙',
relationship: '大学室友',
meet: '2010-09-02',
place: '5#633',
execg: '二哥',
year: '8年',
works: '遇见',
isEdit: '1'
}, {
people: '马康',
relationship: '大学室友',
meet: '2010-09-02',
place: '餐饮大厦',
execg: '康哥',
year: '8年',
works: '不再联系',
isEdit: '1'
}, {
people: '牛光卫',
relationship: '大学室友',
meet: '2010-09-02',
place: '图书馆',
execg: '牛牛娃',
year: '8年',
works: '断点',
isEdit: '1'
}, {
people: '陆兆攀',
relationship: '大学室友',
meet: '1991-07-27',
place: '百浪',
execg: '帅哥',
year: '27年',
works: '不再犹豫',
isEdit: '0'
}, {
people: '小甜',
relationship: '亲密的人',
meet: '2016-10-05',
place: '小寨',
execg: '甜甜圈',
year: '2年',
works: 'Forever Love',
isEdit: '0'
}]
}
}
}
</script>
<style lang="scss">
.one {
background: #ff1493;
}
</style>
效果如下图所示,表格行的背景颜色会根据一行中的isEdit 这个值得属性改变
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)