基于elementUI二次封装一个表格加上搜索的控件

<template>
    <!-- 
        组件属性：
        selection：表格是否可勾选
         querys: [搜索配置
                {
                    label: "所属网关",//标题
                    name: 'gatewayId',//v-model的参数名
                    value: '',//v-model的参数值
                    type: "select",//控件类型
                    list: [//选项],
                    attr: {
                        multiple: false,
                        disabled: false,
                        clearable: false,
                    }//绑定自定义属性
                },
            ],
             columnlist: [//表格配置
                {
                    label: "是否确认",//表格的label
                    prop: 'isConfirm',//表格的prop
                    slot: true,//是否启用插槽
                    filter: (item) => {//过滤函数,item是当前row
                        return item == 0 ? '未确认' : '已确认'
                    },
                    attr: {//自定义属性
                        align: 'center',
                        width: '100px'

                    },
                    btns:[{

                    }]//按钮
                },
                {
                    label: "操作",
                    prop: '',
                    slot: true,
                    attr: {
                        align: 'center'

                    },
                    btns: [{
                        label: '确认',//按钮label
                        fn: (row) => {
                            //按钮点击事件回调
                            console.log(row, this.$refs.Tablez)
                            this.$refs.Tablez.$emit('confirm', row);
                        },
                        attr: {
                            //自定义属性
                            type: "primary",
                            size: "mini",
                            plain: true,
                        }
                    }
                    ]
                }],
                  serchbtns: [//搜索行操作按钮
                {
                    label: '一键确认',//按钮label
                    fn: (rows) => {//按钮点击回调
                        console.log(rows, this.$refs.Tablez)
                        this.allCheck();
                    },
                    attr: {
                        //自定义属性
                        type: "primary",
                        size: "mini",
                        plain: true,
                        icon: "el-icon-check"
                    }
                }
            ],
     -->
    <div>
        <el-row>
            <el-col :span="24">
                <slot name="header"></slot>
                <slot name="querys">
                    <el-form ref="queryForm" size="small" :inline="true" label-width="auto" style="margin-top: 40px">
                        <el-form-item v-for="item, index in querys" :key="index" :label="item.label">
                            <template v-if="item.type == 'select'">
                                <el-select v-model="item.value" placeholder="请选择" v-bind={...item.attr}
                                    @change="changed(item)">
                                    <el-option v-for="i, index in item.list" :key="index" :label="i.label" :value="i.value">
                                    </el-option>
                                </el-select>
                            </template>
                            <template v-if="item.type == 'DatePicker'">
                                <el-date-picker v-model="item.value" type="datetime" placeholder="选择日期时间">
                                </el-date-picker>
                            </template>
                        </el-form-item>
                        <span>
                            <el-button v-for="s,index in serchbtns" :key="index" v-bind="{...s.attr}" @click="s.fn()">{{ s.label }}</el-button>
                        </span>
                    </el-form>
                </slot>
            </el-col>
            <el-col :span="24">
                <slot name="table">
                    <el-table v-loading="loading" :data="tablelist" stripe ref="tablelist" @selection-change="checkRow">
                        <el-table-column v-if="selection" type="selection" width="55" align="center" />
                        <el-table-column v-for="item, index in columnlist" :key="index" :label=item.label :prop="item.prop"
                            v-bind={...item.attr}>
                            <template slot-scope="{row}">
                                <div v-if="item.slot == false">
                                    {{ row[item.prop] }}
                                </div>
                                <div v-if="item.slot && typeof (item.filter) == 'function'">{{
                                    item.filter(row[item.prop]) }}</div>
                                <div v-if="item.slot && item.btns && item.btns.length > 0">
                                    <el-button v-for="i, index in item.btns" :key="index" v-bind="{ ...i.attr }"
                                        @click="i.fn(row)">{{ i.label }}</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                        @pagination="getList(pageNum)" />
                </slot>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    name: 'Tablez',
    props: {
        total:{
            type:Number,
            default:0
        },
        pageNum:{
            type:Number,
            default:1
        },
        pageSize:{
            type:Number,
            default:10
        },
        selection: {
            //列表是否可勾选
            type: Boolean,
            default: false
        },
        querys: {
            //搜索表单配置
            type: Array,
            default: () => {
                return [
                    {
                        label: "所属网关",//名字
                        name: 'getwayid',//v-model的key
                        value: '',//v-model的value
                        type: "select",//控件类型
                        list: [//options
                            {
                                value: '选项1',
                                label: '黄金糕'
                            }
                        ]
                    },
                    {
                        label: "所属设备",
                        name: 'deviceid',
                        value: "",
                        type: "select",
                        list: [
                            {
                                value: '选项2',
                                label: '黄金糕2'
                            }
                        ]
                    },
                    {
                        label: '日期',
                        name: 'date',
                        value: "",
                        type: 'DatePicker'
                    }
                ]
            }
        },
        serchbtns:{
            type:Array,
            default:()=>{
                return[
               
                ]
            }
        },
        loading: {
            type: Boolean,
            default: false
        },
        tablelist: {
            type: Array,
            default: () => {
                return []
            }
        },
        columnlist: {
            type: Array,
            default: () => []


        }
    },

    data() {
        return {

        };
    },

    mounted() {

    },

    methods: {
        changed(e) {
            console.log(e)
            this.$emit('changed', { name: e.name, value: e.value })
        },
        checkRow(e) {
                console.log(e)
                this.$emit('getRows',e)
        },
        getList(e){
            thie.$emit('pagination',e)
        }
    },
};
</script>

<style scoped></style>

使用时按照注释进行配置即可生成对应的表格和搜索框。

也可以使用内置的插槽进行自定义

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

serchbtns: [//搜索行操作按钮
               {
                   label: '一键确认',
                   fn: (rows) => {
                       console.log(rows, this.$refs.Tablez)
                       this.allCheck();
                   },
                   attr: {
                       type: "primary",
                       size: "mini",
                       plain: true,
                       icon: "el-icon-check"
                   }
               }
           ],
           selection: true,//表格是否可勾选
           columnlist: [
               {
                   label: '设备名称',
                   prop: 'deviceName',
                   slot: false,
                   attr: {
                       align: 'center'
 
                   }
               },
               {
                   label: "发生时间",
                   prop: 'lastAlert',
                   slot: false,
                   attr: {
                       align: 'center'
 
                   }
               },
               {
                   label: "告警类型",
                   prop: 'levelName',
                   slot: false,
                   attr: {
                       align: 'center'
 
                   }
               },
               {
                   label: "阈值",
                   prop: 'threshold',
                   slot: false,
                   attr: {
                       align: 'center'
 
                   }
               },
               {
                   label: "触发值",
                   prop: 'value',
                   slot: false,
                   attr: {
                       align: 'center'
 
                   }
               },
               {
                   label: "物理量名称",
                   prop: 'displayName',
                   slot: false,
                   attr: {
                       align: 'center'
 
                   }
               },
               {
                   label: "是否确认",
                   prop: 'isConfirm',
                   slot: true,
                   filter: (item) => {
                       return item == 0 ? '未确认' : '已确认'
                   },
                   attr: {
                       align: 'center',
                       width: '100px'
 
                   }
               },
               {
                   label: "确认操作人",
                   prop: 'nickName',
                   slot: false,
                   attr: {
                       align: 'center',
                       width: '100px'
 
                   }
               },
               {
                   label: "操作",
                   prop: '',
                   slot: true,
                   attr: {
                       align: 'center'
 
                   },
                   btns: [{
                       label: '确认',
                       fn: (row) => {
                           console.log(row, this.$refs.Tablez)
                           this.$refs.Tablez.$emit('confirm', row);
                       },
                       attr: {
                           type: "primary",
                           size: "mini",
                           plain: true,
                       }
                   }
                   ]
               }],
           querys: [
               {
                   label: "所属网关",//标题
                   name: 'gatewayId',//v-model的参数名
                   value: '',//v-model的参数值
                   type: "select",//控件类型
                   list: [
 
                   ],
                   attr: {
                       multiple: false,
                       disabled: false,
                       clearable: false,
                   }//绑定自定义属性
               },
               {
                   label: "所属设备",
                   name: 'deviceId',
                   value: "",
                   type: "select",
                   list: [
 
                   ]
               },
           ],

　　比如这样配置就可以生成

当然各位也可以在里面进行自己的一些其他配置，也可以增加一些控件。

如果觉得有用的话就拿去用把，别忘了点个赞哦

<template>
    <!-- 
        组件属性：
        selection：表格是否可勾选
         querys: [搜索配置
                {
                    label: "所属网关",//标题
                    name: 'gatewayId',//v-model的参数名
                    value: '',//v-model的参数值
                    type: "select",//控件类型
                    list: [//选项],
                    attr: {
                        multiple: false,
                        disabled: false,
                        clearable: false,
                    }//绑定自定义属性
                },
            ],
             columnlist: [//表格配置
                {
                    label: "是否确认",//表格的label
                    prop: 'isConfirm',//表格的prop
                    slot: true,//是否启用插槽
                    filter: (item) => {//过滤函数,item是当前row
                        return item == 0 ? '未确认' : '已确认'
                    },
                    attr: {//自定义属性
                        align: 'center',
                        width: '100px'

                    },
                    btns:[{

                    }]//按钮
                },
                {
                    label: "操作",
                    prop: '',
                    slot: true,
                    attr: {
                        align: 'center'

                    },
                    btns: [{
                        label: '确认',//按钮label
                        fn: (row) => {
                            //按钮点击事件回调
                            console.log(row, this.$refs.Tablez)
                            this.$refs.Tablez.$emit('confirm', row);
                        },
                        attr: {
                            //自定义属性
                            type: "primary",
                            size: "mini",
                            plain: true,
                        }
                    }
                    ]
                }],
                  serchbtns: [//搜索行操作按钮
                {
                    label: '一键确认',//按钮label
                    fn: (rows) => {//按钮点击回调
                        console.log(rows, this.$refs.Tablez)
                        this.allCheck();
                    },
                    attr: {
                        //自定义属性
                        type: "primary",
                        size: "mini",
                        plain: true,
                        icon: "el-icon-check"
                    }
                }
            ],
     -->
    <div>
        <el-row>
            <el-col :span="24">
                <slot name="header"></slot>
                <slot name="querys">
                    <el-form ref="queryForm" size="small" :inline="true" label-width="auto" style="margin-top: 40px">
                        <el-form-item v-for="item, index in querys" :key="index" :label="item.label">
                            <template v-if="item.type == 'select'">
                                <el-select v-model="item.value" placeholder="请选择" v-bind={...item.attr}
                                    @change="changed(item)">
                                    <el-option v-for="i, index in item.list" :key="index" :label="i.label" :value="i.value">
                                    </el-option>
                                </el-select>
                            </template>
                            <template v-if="item.type == 'DatePicker'">
                                <el-date-picker v-model="item.value" type="datetime" placeholder="选择日期时间">
                                </el-date-picker>
                            </template>
                        </el-form-item>
                        <span>
                            <el-button v-for="s,index in serchbtns" :key="index" v-bind="{...s.attr}" @click="s.fn()">{{ s.label }}</el-button>
                        </span>
                    </el-form>
                </slot>
            </el-col>
            <el-col :span="24">
                <slot name="table">
                    <el-table v-loading="loading" :data="tablelist" stripe ref="tablelist" @selection-change="checkRow">
                        <el-table-column v-if="selection" type="selection" width="55" align="center" />
                        <el-table-column v-for="item, index in columnlist" :key="index" :label=item.label :prop="item.prop"
                            v-bind={...item.attr}>
                            <template slot-scope="{row}">
                                <div v-if="item.slot == false">
                                    {{ row[item.prop] }}
                                </div>
                                <div v-if="item.slot && typeof (item.filter) == 'function'">{{
                                    item.filter(row[item.prop]) }}</div>
                                <div v-if="item.slot && item.btns && item.btns.length > 0">
                                    <el-button v-for="i, index in item.btns" :key="index" v-bind="{ ...i.attr }"
                                        @click="i.fn(row)">{{ i.label }}</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                        @pagination="getList(pageNum)" />
                </slot>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    name: 'Tablez',
    props: {
        total:{
            type:Number,
            default:0
        },
        pageNum:{
            type:Number,
            default:1
        },
        pageSize:{
            type:Number,
            default:10
        },
        selection: {
            //列表是否可勾选
            type: Boolean,
            default: false
        },
        querys: {
            //搜索表单配置
            type: Array,
            default: () => {
                return [
                    {
                        label: "所属网关",//名字
                        name: 'getwayid',//v-model的key
                        value: '',//v-model的value
                        type: "select",//控件类型
                        list: [//options
                            {
                                value: '选项1',
                                label: '黄金糕'
                            }
                        ]
                    },
                    {
                        label: "所属设备",
                        name: 'deviceid',
                        value: "",
                        type: "select",
                        list: [
                            {
                                value: '选项2',
                                label: '黄金糕2'
                            }
                        ]
                    },
                    {
                        label: '日期',
                        name: 'date',
                        value: "",
                        type: 'DatePicker'
                    }
                ]
            }
        },
        serchbtns:{
            type:Array,
            default:()=>{
                return[
               
                ]
            }
        },
        loading: {
            type: Boolean,
            default: false
        },
        tablelist: {
            type: Array,
            default: () => {
                return []
            }
        },
        columnlist: {
            type: Array,
            default: () => []


        }
    },

    data() {
        return {

        };
    },

    mounted() {

    },

    methods: {
        changed(e) {
            console.log(e)
            this.$emit('changed', { name: e.name, value: e.value })
        },
        checkRow(e) {
                console.log(e)
                this.$emit('getRows',e)
        },
        getList(e){
            thie.$emit('pagination',e)
        }
    },
};
</script>

<style scoped></style>