Element UI 动态表格踩坑指南

最新推荐文章于 2024-04-04 15:56:24 发布

LGEC

最新推荐文章于 2024-04-04 15:56:24 发布

阅读量309

点赞数 1

分类专栏：疑难杂症文章标签： javascript elementui vue

本文链接：https://blog.csdn.net/LGEC_/article/details/131200371

版权

一、ElementUI 动态表格示例

特别注意： el-table-column标签外不能嵌套除template之外的标签，否则表格样式会乱掉。

	<template>
    <div class="app-container">
        <div class="example-item">
            <div class="title">普通表格</div>
            <el-table :data="tableData" style="width: 100%" max-height="250">
                <el-table-column fixed prop="date" label="日期" min-width="150">
                </el-table-column>
                <el-table-column prop="name" label="姓名" min-width="120">
                </el-table-column>
                <el-table-column prop="province" label="省份" min-width="120">
                </el-table-column>
                <el-table-column prop="city" label="市区" min-width="120">
                </el-table-column>
                <el-table-column prop="address" label="地址" min-width="300">
                </el-table-column>
                <el-table-column prop="zip" label="邮编" min-width="120">
                </el-table-column>
            </el-table>
        </div>
        <div class="example-item">
            <div class="title">动态表格</div>
            <el-table :data="tableData" style="width: 100%" max-height="250">
                <el-table-column fixed prop="date" label="日期" min-width="150">
                </el-table-column>
                <el-table-column v-for="(item, index) in tableTh" :key="index" :min-width="item.width">
                    <template slot="header">
                        <span class="major">{
   {
   item.label}}</span><br>
                    </template>
                    <template slot-scope="scope">
                        <span>
                            {
   {
    scope.row[item.prop] }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="zip" label="邮编" min-width="120">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>

export default {
   
    name: 'liveTable',
    data() {
   
        return {
   
            tableData: [{
   
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
   
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
   
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
   
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
   
                date: '2016-05-08',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
   
                date: '2016-05-06',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
   
                date: '2016-05-07',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }],
            tableTh: [{
   
                label: '姓名',
                prop: 'name',
                width: 120
            }, {
   
                label: '省份',
                prop: 'province',
                width: 120
            }, {
   
                label: '市区',
                prop: 'city',
                width: 120
            }, {
   
                label: '地址',
                prop: 'address',
                width: 300
            }]
        };
    },
    created() {
   
    },
    methods: {
   
    }
};
</script>
<style lang="scss" scoped>
.example-item {
   
    padding: 15px