基于Vue+element-ui 的Table二次封装的实现的攻略如下：
1. 概述
在使用Vue+element-ui进行前端开发时，经常会使用element-ui中的Table组件进行表格展示。但是，由于项目需求和个性化设计的不同，可能需要对Table组件进行二次封装。本攻略主要讲解如何基于Vue+element-ui进行Table二次封装。
2. Table二次封装的实现
Table二次封装主要分为以下步骤：
步骤一：创建Table封装组件
首先，需要在Vue工程中创建Table封装组件，在组件中引入element-ui Table组件，并进行相关配置。代码示例：
<template>
<el-table
:data="tableData"
:width="tableWidth"
:max-height="pageHeight"
:border="border"
:fit="fit"
:stripe="stripe"
:highlight-current-row="highlightCurrentRow"
:row-class-name="rowClassName"
:tooltip-effect="tooltipEffect"
@sort-change="sortChange"
@current-change="currentChange"
@select="select"
@select-all="selectAll">
<!-- 列头 -->
<el-table-column
v-for="column in columns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:width="column.width"
:min-width="column.minWidth"
:fixed="column.fixed"
:resizable="column.resizable"
:formatter="column.formatter"
:sortable="column.sortable"
:sort-method="column.sortMethod"
:sort-by="column.sortBy"
:sort-orders="column.sortOrders"
:show-overflow-tooltip="column.showOverflowTooltip"
:align="column.align"
:header-align="column.headerAlign"
:class-name="column.className"
:label-class-name="column.labelClassName"
:selectable="column.selectable"
v-if="!column.hidden"
>
<!-- 插槽 -->
<template v-for="slot in Object.keys(column.slots)">
<template v-slot:[slot]="{row}">
<slot :name="slot" :row="row"></slot>
</template>
</template>
<!-- 默认插槽 -->
<template v-if="!column.slots.default">
{{ column.prop }}
</template>
<!-- 隐藏列 -->
<template v-if="column.hidden">
<el-table-column
:key="`hidden_${column.prop}`"
:prop="column.prop"
:label="column.label"
:class-name="column.className"
:label-class-name="column.labelClassName"
:selectable="column.selectable"
:show-overflow-tooltip="column.showOverflowTooltip"
:formatter="(row) => ''"
:sortable="false"
:sort-by="column.sortBy"
:sort-orders="column.sortOrders"
:width="0"
:min-width="0"
:fixed="column.fixed"
:resizable="column.resizable"
:align="column.align"
:header-align="column.headerAlign"
></el-table-column>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: 'MyTable',
props: {
// 表格数据
tableData: {
type: Array,
required: true
},
// 表格列配置
columns: {
type: Array,
required: true
},
// 表格宽度
tableWidth: {
type: String,
default: '100%'
},
// 分页高度
pageHeight: {
type: String,
default: ''
},
// 是否显示边框
border: {
type: Boolean,
default: true
},
// 是否宽度适应容器
fit: {
type: Boolean,
default: true
},
// 是否交替显示背景色
stripe: {
type: Boolean,
default: true
},
// 是否高亮选中行
highlightCurrentRow: {
type: Boolean,
default: true
},
// 行的自定义类名
rowClassName: {
type: [String, Function],
default: ''
},
// tooltip的打开方式
tooltipEffect: {
type: String,
default: 'dark'
}
},
methods: {
// 回调函数：列排序改变时触发
sortChange({ column, prop, order }) {
console.log(column, prop, order);
},
// 回调函数：当前行发生变化时触发
currentChange(currentRow, oldCurrentRow) {
console.log(currentRow, oldCurrentRow);
},
// 回调函数：选中行时触发
select(selection, row) {
console.log(selection, row);
},
// 回调函数：全选时触发
selectAll(selection) {
console.log(selection);
}
}
}
</script>
<style lang="scss" scoped>
</style>
步骤二：根据需求进行封装
在创建好Table封装组件后，根据项目需求进行封装。主要包括以下步骤：
- 封装分页组件；
- 封装表格查询组件，进行数据过滤；
- 封装自定义列组件；
- 封装表头固定组件；
- 封装表格编辑组件。
- 插入slot以实现自定义需求
以上步骤可以根据实际需要进行选择，也可以根据需求进行自定义封装。
步骤三：引入封装的Table组件
在需要使用封装的Table组件的地方，通过import引入自定义的Table组件即可。代码示例：
<template>
<div>
<my-table
:table-data="tableData"
:columns="columns"
:table-width="tableWidth"
:page-height="pageHeight"
:border="border"
:fit="fit"
:stripe="stripe"
:highlight-current-row="highlightCurrentRow"
:row-class-name="rowClassName"
:tooltip-effect="tooltipEffect"
@sort-change="sortChange"
@current-change="currentChange"
@select="select"
@select-all="selectAll">
</my-table>
</div>
</template>
<script>
import MyTable from '@/components/MyTable.vue'
export default {
components: {
MyTable
},
data() {
return {
tableData: [],
columns: [
{
label: '姓名',
prop: 'name'
},
{
label: '年龄',
prop: 'age'
}
],
tableWidth: '100%',
pageHeight: '',
border: true,
fit: true,
stripe: true,
highlightCurrentRow: true,
rowClassName: '',
tooltipEffect: 'dark'
}
},
methods: {
sortChange({ column, prop, order }) {
console.log(column, prop, order);
},
currentChange(currentRow, oldCurrentRow) {
console.log(currentRow, oldCurrentRow);
},
select(selection, row) {
console.log(selection, row);
},
selectAll(selection) {
console.log(selection);
}
}
}
</script>
<style lang="scss">
</style>
3. 示例说明
示例一：Table组件实现分页功能
在二次封装中，新增了分页组件，在Table组件中通过引入el-pagination组件实现分页功能。代码示例：
<template>
<div>
<el-pagination
:background="background"
:page-size="pageSize"
:page-sizes="pageSizes"
:total="total"
@current-change="_currentChange"
@size-change="_sizeChange"
layout="total, sizes, prev, pager, next, jumper"
/>
</div>
</template>
<script>
export default {
name: 'MyPagination',
props: {
// 是否有背景颜色
background: {
type: Boolean,
default: true
},
// 当前页码
currentPage: {
type: Number,
required: true
},
// 每页展示条数
pageSize: {
type: Number,
default: 10
},
// 每页展示条数选择器
pageSizes: {
type: Array,
default() {
return [10, 20, 50, 100];
}
},
// 数据总条数
total: {
type: Number,
default: 0
}
},
methods: {
// 回调函数：当前页码发生变化时触发
_currentChange(currentPage) {
this.$emit('current-change', currentPage);
},
// 回调函数：每页展示条数发生变化时触发
_sizeChange(pageSize) {
this.$emit('size-change', pageSize);
}
}
}
</script>
<style lang="scss" scoped>
</style>
示例二：Table组件实现自定义列功能
在二次封装中，新增了自定义列组件，在Table组件中通过引入可编辑列插件table-editor，实现自定义列功能。代码示例：
<template>
<div>
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
<i class="el-icon-setting"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="column in allColumns" :key="column.prop" :command="column.prop" :disabled="column.required">
{{ column.label }}
<i class="el-icon-check" v-if="column.required"></i>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
export default {
name: 'MyColumnCustomize',
props: {
// 默认列配置
defaultColumns: {
type: Array,
required: true
},
// 可选列配置
allColumns: {
type: Array,
required: true
}
},
methods: {
// 回调函数：选择自定义列时触发
handleCommand(command) {
this.$emit('change-columns', command);
}
}
}
</script>
<style lang="scss" scoped>
</style>
以上是基于Vue+element-ui的Table二次封装的实现的攻略，通过封装Table组件，可以更加灵活方便地满足项目需求。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于Vue+element-ui 的Table二次封装的实现 - Python技术站
微信扫一扫 
支付宝扫一扫 