封装完成的组件代码
<template>
<div>
<el-popover
placement="right-start"
width="150"
trigger="hover">
<el-tooltip class="item" content="上下拖动字段进行排序" placement="left" effect="light">
<draggable v-model="sortModel"
class="table-column-sorter" chosenClass="is-chosen" animation="true"
@change="handleTableColumnSort"
>
<el-checkbox v-model="column.isShow" v-for="column in sortModel" :key="column.name"
class="sortable-column">
<div style="display: flex;align-items: center;justify-content:space-between;width: 100%">
<span style="margin: 5px 0">{{ column.name }}</span>
<i class="el-icon-sort" style="cursor: move;text-align: right"></i>
</div>
</el-checkbox>
</draggable>
</el-tooltip>
<i class="el-icon-s-unfold" style="color: #198cff" slot="reference"></i>
</el-popover>
</div>
</template>
<script>
import draggable from "vuedraggable"
export default {
name: "PackageSortElement",
components:{
draggable,
} ,
props:{
//接收调用组件者传参数 :AllParameters="sortModel" sortModel是组件中自己定义的排序顺序
//用AllParameters去接收
AllParameters:{
type: Array,
}
},
data(){
return{
//接收到的数据传入 拖拽组件中进行排序
sortModel:this.AllParameters
}
},
methods:{
handleTableColumnSort() {
//当我们进行拖动的时候去调用 组件的change事件进行传参 this.sortModel是排序完成之后的顺序,拿到并且在原页面进行赋值
this.$emit("change", this.sortModel)
},
}
}
</script>
<style lang="scss" scoped>
.table-column-sorter {
position: relative;
::v-deep .el-checkbox__label {
width: 88%;
}
.title-tooltip {
position: absolute;
left: -150px;
top: 50%;
}
::v-deep .el-checkbox {
width: 100%;
}
.sortable-column {
padding: 3px;
color: #aaaaaa;
cursor: pointer;
}
.sortable-column:hover {
background: #cbedfc;
padding: 3px;
}
}
.el-icon-s-unfold {
cursor: pointer;
position: absolute;
z-index: 998;
right: 32.5px;
top: 9px;
height: 12px;
}
</style>
引用组件
import PackageSortElement from "../components/PackageSortElement";
<PackageSortElement :AllParameters="sortModel" @change="SortList"></PackageSortElement>
sortModel:原页面自己的顺序排序
引用组件代码
<div class="cancellation-ticket-content-table">
<PackageSortElement :AllParameters="sortModel" @change="SortList"></PackageSortElement>
<template>
<el-table
ref="inputListTable"
// tableData后端传过来的数据
:data="tableData"
stripe
tooltip-effect="dark"
@selection-change="invoiceSelection"
v-el-table-height-adaptive height="200px"
border
:key="key"
>
<el-table-column type="selection"/>
<el-table-column type="index" label="序号" width="50">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
//遍历数组顺序
<template v-for="(data,index) in sortModel">
<el-table-column :label="data.name"
:key="index"
v-if="data.isShow"
:min-width="data.width"
:show-tooltip-when-overflow="data.isShow">
<template v-slot="{row}">
<div v-if="data.name === '香肠'"> {{ row.xc}}</div>
<div v-else-if="data.name === '号码'"> {{ row.hm}}</div>
<div v-else-if="data.name === '代码'"> {{ row.dm}}</div>
<div v-else-if="data.name === '状态'"> {{ row.zt}}</div>
<div v-else-if="data.name === '手机号'"> {{ row.sjh}}</div>
</template>
</el-table-column>
</template>
<el-table-column label="" width="90" fixed="right">
</el-table-column>
</el-table>
</template>
</div>
date(){
return{
//自己定义的顺序,
sortModel: [
{
name: '香肠,
isShow: true
},
{
name: '号码',
isShow: true
},
{
name: '代码',
isShow: true
},
{
name: '状态',
isShow: true
},
{
name: '手机号',
isShow: true
},
],
}
}
//事件 拿到从组件内部处理的数据顺序并赋值
SortList(value){
this.sortModel = value;
},
:AllParameters="sortModel" ,根据 :AllParameters将sortModel传到封装的组件内
封装组件内部根据 this.$emit("change", this.sortModel) @change="SortList"事件 将处理好的数据传到原页面
然后进行接收替换:
SortList(value){
this.sortModel = value;
},