Element UI 表格進(jìn)行二次封裝
Tips: 文章末尾有完整封裝代碼
一、繼承 element 表格屬性
需要將element提供的表格屬性使用props傳入組件中
props: {
// 表頭數(shù)據(jù) { slot: 'xxx', header: 'xxx' }[]
// slot：自定義列的slot-name；header：自定義表頭的slot-name
columns: Array,
// 表格加載動(dòng)畫
loading: Boolean,
// ...其余屬性同 ElementUI 表格 Attributes 直接傳入即可
}
二、配置 element 表格的表頭
- 使用
props傳入的表頭數(shù)據(jù)遍歷得到表格的表頭。
<el-table-column v-for="item in columns" :key="item.prop" v-bind="item"></el-table-column>
<!-- or -->
<el-table-column
v-for="item in columns" :key="item.prop"
:prop="item.prop"
:label="item.label"
:align="item.align || 'left'"
:header-align="item.headerAlign || 'left'"
:show-overflow-tooltip="item.tooltip || false"
:min-width="item.minWidth"
:width="item.width"
:fixed="item.fixed"
:class-name="item.columnClass"
:label-class-name="item.labelClassName"
/>
<!-- or -->
<el-table-column v-for="item in columns" :key="item.prop" v-bind="item">
<template v-if="item.header" #header="scope">
<slot :name="item.header" v-bind="scope"></slot>
</template>
<template v-if="item.slot" #default="scope">
<slot :name="item.slot" v-bind="scope"></slot>
</template>
</el-table-column>
- 有些列的數(shù)據(jù)需要自定義內(nèi)容，例如：操作列、不同樣式的數(shù)據(jù)展示等。
方式一
需要自定義內(nèi)容的列可以使用 <slot></slot> 傳入自定義內(nèi)容；這里就不能直接在 <el-table-column></el-table-column> 上使用 v-for 來遍歷了，需要使用 <template></template> 來進(jìn)行 v-for 的循環(huán)遍歷，此時(shí)需要注意的是 v-for 需要定義一個(gè) v-bind:key 但是不能直接將 key 賦給 <template ></template > 但是可以將 key 賦給其他組件 例如 <el-table-column :key="index"></el-table-column>
<!-- 方式一 -->
<template v-for="item in columns">
<!-- 操作列/自定義列 -->
<slot v-if="item.slot" :name="item.slot"></slot>
<el-table-column :key="item.prop" v-bind="item"></el-table-column>
<!-- or
<el-table-column
v-else
:key="item.prop"
:prop="item.prop"
:label="item.label"
:align="item.align || 'left'"
:header-align="item.headerAlign || 'left'"
:show-overflow-tooltip="item.tooltip || false"
:min-width="item.minWidth"
:width="item.width"
:fixed="item.fixed"
:class-name="item.columnClass"
:label-class-name="item.labelClassName"
></el-table-column>
-->
</template>
方式二
在父組件中使用時(shí)不用再寫 <el-table-column></el-table-column> 標(biāo)簽，直接在 table 中寫對(duì)應(yīng)的 slot 內(nèi)容即可
<el-table-column v-for="item in columns" :key="item.prop" v-bind="item">
<!-- 自定義表頭的內(nèi)容 -->
<template v-if="item.header" #header="scope">
<slot :name="item.header" v-bind="scope"></slot>
</template>
<!-- 自定義列的內(nèi)容 -->
<template v-if="item.slot" #default="scope">
<slot :name="item.slot" v-bind="scope"></slot>
</template>
</el-table-column>
例如 父組件
<p-table ref="package-table" :columns="columns" :data="data">
<template #name="{ row }">
<span>{{ row.name }}</span>
</template>
</p-table>
<script>
export default {
data: () {
return {
data: [
{
name: '張三',
},
],
columns: [
{
props: 'name',
label: '姓名',
width: '120px',
slot: 'name',
},
],
};
},
}
</script>
三、element 表格事件
-
Table Events如果需要使用一些表格返回的事件，可以使用this.$emit()傳遞給父組件
也可以直接使用v-on="$attrs"綁定外部傳入的事件
例如：@cell-click 當(dāng)某個(gè)單元格被點(diǎn)擊時(shí)會(huì)觸發(fā)該事件 row, column, cell, event
// @cell-click="cellClick"
methods: {
cellClick(row, column, cell, event) {
this.$emit('cell-click', {row, column, cell, event})
}
}
-
Table Methods如果需要使用一些表格的方法，可以在父組件使用this.$refs['父組件中子組件的ref'].$refs['子組件table的ref'].方法名調(diào)用
例如： clearSort() 用于清空排序條件，數(shù)據(jù)會(huì)恢復(fù)成未排序的狀態(tài)
<!-- 父組件 -->
<template>
<p-table ref="package-table" :columns="columns" :data="data">
<template #name="{ row }">
<span>{{ row.name }}</span>
</template>
</p-table>
</template>
<script>
export default {
data: () {
return {
data: [
{
name: '張三',
age: 24,
},
{
name: '李四',
age: 35,
},
],
columns: [
{
props: 'name',
label: '姓名',
width: '120px',
slot: 'name',
},
{
props: 'age',
label: '年齡',
},
],
};
},
methods: {
// 調(diào)用表格方法
clearSort() {
this.$refs['package-table'].$refs.tableRef.clearSort()
}
}
}
</script>
<!-- 子組件 -->
<template>
<el-table ref="tableRef" v-loading="loading" v-bind="$attrs" v-on="$attrs"></el-table>
</template>
至此，對(duì) element 表格的二次封裝就已經(jīng)大功告成了！
完整代碼
<template>
<!-- @cell-click="cellClick" -->
<el-table
ref="tableRef"
v-loading="loading"
v-bind="$attrs"
v-on="$attrs"
>
<template v-for="item in columns">
<!-- 自定義table-column -->
<slot v-if="item.slot" :name="item.slot"></slot>
<el-table-column :key="item.prop" v-bind="item" />
<!--
<el-table-column
v-else
:key="item.prop"
:prop="item.prop"
:label="item.label"
:align="item.align || 'left'"
:header-align="item.headerAlign || 'left'"
:show-overflow-tooltip="item.tooltip || false"
:min-width="item.minWidth"
:width="item.width"
:fixed="item.fixed"
:class-name="item.columnClass"
:label-class-name="item.labelClassName"
/>
-->
</template>
<!-- 插入至表格最后一行之后的內(nèi)容-->
<template #append v-if="$slots.append">
<slot name="append" />
</template>
<!-- 空數(shù)據(jù)時(shí)顯示的內(nèi)容 -->
<template #empty v-if="$slots.empty">
<slot name="empty" />
</template>
</el-table>
</template>
<script>
export default {
name: 'package-table',
props: {
// 表頭數(shù)據(jù) Table-column Attributes
// { slot: 'xxx', header: 'xxx' }[]
// slot：自定義列的slot-name；header：自定義表頭的slot-name
columns: Array,
// 表格加載動(dòng)畫
loading: Boolean,
// ...其余屬性同 ElementUI 表格 Attributes 直接傳入即可
},
// methods: {
// // 點(diǎn)擊單元格
// cellClick(row, column, cell, event) {
// this.$emit('cell-click', {row, column, cell, event})
// }
// },
}
</script>
or文章來源：http://www.zghlxwxcb.cn/news/detail-404985.html
<template>
<el-table
ref="tableRef"
v-loading="loading"
v-bind="$attrs"
v-on="$attrs"
>
<el-table-column v-for="item in columns" :key="item.prop" v-bind="item">
<!-- 自定義表頭的內(nèi)容 -->
<template v-if="item.header" #header="scope">
<slot :name="item.header" v-bind="scope"></slot>
</template>
<!-- 自定義列的內(nèi)容 -->
<template v-if="item.slot" #default="scope">
<slot :name="item.slot" v-bind="scope"></slot>
</template>
</el-table-column>
<!-- 插入至表格最后一行之后的內(nèi)容-->
<template #append v-if="$slots.append">
<slot name="append" />
</template>
<!-- 空數(shù)據(jù)時(shí)顯示的內(nèi)容 -->
<template #empty v-if="$slots.empty">
<slot name="empty" />
</template>
</el-table>
</template>
<script>
export default {
name: 'package-table',
props: {
// 表頭數(shù)據(jù) Table-column Attributes
// { slot: 'xxx', header: 'xxx' }[]
// slot：自定義列的slot-name；header：自定義表頭的slot-name
columns: Array,
// 表格加載動(dòng)畫
loading: Boolean,
// ...其余屬性同 ElementUI 表格 Attributes 直接傳入即可
},
}
</script>
Ending…
ding…
ng…
…
.文章來源地址http://www.zghlxwxcb.cn/news/detail-404985.html
到了這里，關(guān)于Element UI 表格 el-table 二次封裝的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
