vue-element表格列进行筛选列

完整代码如下:

<template>

 <div>

        <div>

            <el-checkbox-group v-model=”formData”>

                <el-checkbox label=”date”>日期</el-checkbox>

                <el-checkbox label=”name”>姓名</el-checkbox>

                <el-checkbox label=”address”>地址</el-checkbox>

            </el-checkbox-group>

        </div>

        <el-table

            :data=”tableData”

            border

            style=”width: 100%”>

            <el-table-column prop=”slhool” label=”学校”/>

            <el-table-column 

               v-for=”item in formData” 

              :key=”item” 

              :label=”item” 

               :render-header=”renderHeaderDate”>

                <template slot-scope=”scope”>

                { { scope.row[item]}}

                </template>

            </el-table-column>

        </el-table>

    </div>

</template>

<script>

export default {

    data(){

        return{

            tableData:[

                {

                    date:’2021′,

                    name:’历史’,

                    address:’辽宁省’,

                    slhool:’体育’

                },

                {

                    date:’2022′,

                    name:’数学’,

                    address:’安徽省’,

                    slhool:’音乐’

                }

            ],

            formData:[‘date’, ‘name’,’address’]

        }

    },

    methods:{

        renderHeaderDate(h, { column, $index }){

            console.log(column)

            if(column.label == ‘date’){

                return ‘日期’

            }else if(column.label == ‘name’){

                return ‘姓名’

            }else if(column.label == ‘address’){

                return ‘地址’

            }else{

                return ‘学校’

            }

        }

    }

}

</script>

图例:

《vue-element表格列进行筛选列》

《vue-element表格列进行筛选列》

 

    原文作者:果栋-大前端
    原文地址: https://blog.csdn.net/guo_yandong/article/details/114320164
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞