封装elementui-table，⽀持⾃定义列
⼆次封装element ui table, ⽀持⾃定义列
注意：
a.⾃定义列需要在引⽤页⾯重新写⼀下，这样就可以定义化了，多数⽤于⼀些转换，或者操作列场景下，⾃⾏考虑即可
<el-table-column
slot="cardType"
label="证件类型"
align="center"
width="300"
>
<template slot-scope="scope">
{{ w.cardType }}
</template>
</el-table-column>
b.操作列可以⾃⼰指定位置，如下，如果要固定的话，就设置el-table-column组件的fixed属性即可。
columns: [
{ slot: "cardType" },
{ label: "名称", prop: "userId" },
{ label: "链接", prop: "userName" },
{ label: "排序", prop: "tel" },
{ slot: "operate" },
], // 操作列
具体封装如下
1 table.vue
<template>
<el-table :data="tableData" max-height="250">    <template v-for="(item, index) in columns">
<slot v-if="item.slot" :name="item.slot"></slot>
<el-table-column
v-else
:key="index"
:fixed="item.fiexed"
:prop="item.prop"
:label="item.label"
:width="item.width"
>
</el-table-column>
</template>
</el-table>
</template>
<script>
export default {
name: "VicTable",
props: {
columns: {
type: Array,
default() {
return [];
},
},
tableData: {
type: Array,
default() {
return [];
},
},
},
components: {},
created() {},
mounted() {},
methods: {
init() {},
},
};
</script>
<style scoped>
</style>
2 引⽤
<vic-table :tableData="tableData" :columns="columns">        <el-table-column
slot="operate"
label="操作"
align="center"
width="300"
>
<template slot-scope="scope">
<el-button
size="small"
type="warning"
icon="el-icon-edit"
@click="w)"
>编辑
</el-button>
<el-button
vue element adminsize="small"
type="primary"
icon="el-icon-success"
@click="w)"
>启⽤
</el-button>
</template>
</el-table-column>
<el-table-column
slot="cardType"
label="证件类型"
align="center"
width="300"
>
<template slot-scope="scope">
{{ w.cardType }}
</template>
</el-table-column>
</vic-table>
//数据和配置项
columns: [
{ slot: "cardType" },
{ label: "名称", prop: "userId" },
{ label: "链接", prop: "userName" },
{ label: "排序", prop: "tel" },
{ slot: "operate" },
], // 操作列
tableData: [
{
userId: "admin",
userName: "管理员",
tel: "138********",
cardType: 1,
},
{
userId: "Mary",
userName: "玛丽",
tel: "1319987678",
cardType: 2,
},
],
剩下的，⾃⼰加⼀下

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。