效果图：
1.封装表格代码如下
<template>
<div><div class="TableList"><el-tablev-loading="loading"@selection-change="selectionChange"class="table":data="tableData":border="hasBorder":row-class-name="tableRowClassName"ref="multipleTable":header-cell-style="{background: 'rgb(245 247 250)',color: 'rgb(51, 51, 51)',}"><el-table-column type="selection" width="50" v-if="selectionShow"> </el-table-column><!-- 序号 --><el-table-column v-if="hasIndex" type="index" label="序号" header-align="center" align="center" width="80"> </el-table-column><!-- 其他 --><template v-for="item in tableColumnOptions"><!-- 插槽列 --><el-table-columnv-if="item.columnType":key="item.label":prop="item.prop":label="item.label":width="item.width":header-align="item.headerAlign || 'center'":align="item.align || 'center'"><template slot-scope="{ row }"><slot :name="item.soltName" :data="row"></slot></template></el-table-column><!-- 非插槽列 --><el-table-columnv-else:key="item.label":prop="item.prop":label="item.label":width="item.width":header-align="item.headerAlign || 'center'":align="item.align || 'center'"><!-- 表头的特殊处理(eg:表头上加提示或图标等)--><template slot="header" v-if="item.showIcon"><div class="tab-header">{{ item.label }}<el-tooltip :content="item.content" placement="top"><i class="el-icon-warning-outline icon"></i></el-tooltip></div></template></el-table-column></template><el-table-column type="selection" width="50" v-if="selectionShow1" :selectable="checkboxT"> </el-table-column></el-table></div>
</div>
</template>
<script>
export default {props:{// 表格数据tableData: {type: Array,default() {return [];},},// 表格列项tableColumnOptions: {type: Array,require: true,default() {return [];},},// 是否具有索引hasIndex: {type: Boolean,default() {return true;},},// 是否显示边框hasBorder: {type: Boolean,default() {return false;},},// 是否显示选择框selectionShow: {type: Boolean,default() {return true;},},//加载loading: {type: Boolean,default: false,},},methods:{// 选择框改变selectionChange(e){this.$emit('selectionChange',e)},tableRowClassName({ row, rowIndex }) {},}
}
</script>
<style scoped lang="scss"></style>2.在页面上使用
<template>
<div><tableList:selection-show="true":loading="loading":has-index="false":has-border="true":table-data="tableData":table-column-options="tableColumnOptions"@selectionChange="selectionChange"><!-- 类型插槽 --><template #tag="{ data }"><div class="tag"><el-tag type="success" v-if="data.type === 1">tag1</el-tag><el-tag type="danger" v-if="data.type === 0">tag2</el-tag></div></template><!-- 操作插槽 --><template #operation="{ data }"><el-button type="text" @click="handleEdit(data)">编辑</el-button><el-button type="text" @click="handleDelete(data)" id="delete">删除</el-button></template></tableList>
</div>
</template>
<script>
import tableList from '@/views/daily-examine/components/table/index.vue';
export default {components:{tableList},data(){return {loading:false,tableData:[{ id: 202391074073, name: "张三", type: 1,special:'1'},{ id: 202391074071, name: "李四", type: 0,special:'1'},{ id: 202391074074, name: "王二", type: 0,special:'1'},{ id: 202391074074, name: "马六", type: 0,special:'1'},{ id: 202391074074, name: "李六", type: 1,special:'1'},],tableColumnOptions:[{ label: "账号", prop: "id" },{ label: "姓名", prop: "name" },{ label: "tag", prop: "type", columnType: true, soltName: "tag" },{ label: "表头特殊处理",prop:'special',showIcon:true, content:'提示，提示，提示', },{ label: "操作", width: "300", columnType: true, soltName: "operation"},],}},methods:{selectionChange(){},//编辑handleEdit(data){},//删除handleDelete(data){},}
}
</script>
<style scoped lang="scss"></style>
以上就是基于element ui封装table组件
