Vue 實現element 的 el-table 的表格類的樣式繫結
阿新 • • 發佈:2019-02-06
<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 這個值得屬性改變