element表格

element表格

1.html： 用v-for循环表头

<el-table
        :data="tableData"
        stripe
        style="width: 100%">
    <el-table-column
            v-for="item in tableColums"
            :prop="item.prop"
            :label="item.label"
            width="280">
        <template slot-scope="{row}">
            <span v-if="item.prop==='date'">
              <el-button>{{row.date}}</el-button>
            </span>
            <span v-else-if="item.prop==='status'">
              {{row.status==1? '正常': '异常'}}
            </span>
            <span v-else>{{row[item.prop]}}</span>
        </template>
    </el-table-column>
    <el-table-column
            label="操作"
            width="180">
        <template>
            <el-button>删除</el-button>
        </template>
    </el-table-column>
</el-table>

2.data

//表头
tableColums: [
    {
        prop: 'date',
        label: '日期'
    },
    {
        prop: 'name',
        label: '姓名'
    },
    {
        prop: 'address',
        label: '地址'
    },
    {
        prop: 'status',
        label: '状态'
    }
]

//数据
tableData: [
    {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        status: '0'
    },
    {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        status: '1'
    },
    {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        status: '1'
    },
    {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        status: '0'
    }
]

3.效果图