赞
踩
- <template>
- <div class="test1-container">
- <el-table :data="tableData" style="width:550px;margin:0 auto;margin-top:30px;" border :row-style="tableRowStyle"
- :header-cell-style="tableHeaderColor" :height="tableHeight">
- <el-table-column prop="date" label="日期(居右)" width="180" align="right" header-align="center">
- </el-table-column>
- <el-table-column prop="name" label="姓名(居中)" width="180" align="center" header-align="center">
- </el-table-column>
- <el-table-column prop="address" label="地址(居左)" width="180" align="left" header-align="center" show-overflow-tooltip >
- </el-table-column>
- </el-table>
- </div>
- </template>
- <script>
- export default {
- name:'test1',
- data() {
- return {
- tableHeight:'',
- tableData: [
- {
- date: '2016-05-02',
- name: '王小虎',
- address: '上海市普陀区金沙江路 1518 弄'
- },
- {
- date: '2016-05-04',
- name: '王小虎',
- address: '上海市普陀区金沙江路 1517 弄'
- },
- {
- date: '2016-05-01',
- name: '王小虎',
- address: '上海市普陀区金沙江路 1519 弄'
- },
- {
- date: '2016-05-03',
- name: '王小虎',
- address: '上海市普陀区金沙江路 1516 弄'
- },
- {
- date: '2016-05-02',
- name: '王小虎',
- address: '上海市普陀区金沙江路 1518 弄'
- },
- {
- date: '2016-05-04',
- name: '王小虎',
- address: '上海市普陀区金沙江路 1517 弄'
- }
- ],
- }
- },
- created(){
- this.tableHeight = window.innerHeight-500
- },
- methods:{
- // 修改table tr行的背景色
- tableRowStyle({ row, rowIndex }) {
- return 'background-color: #F7F6Fd'
- },
- // 修改table header的背景色
- tableHeaderColor({ row, column, rowIndex, columnIndex }) {
- if (rowIndex === 0) {
- return 'background-color: lightblue;color: #fff;font-weight: 500;'
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .test1-container{
-
- }
- </style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。