vue + element 引用sortablejs实现列显隐和拖拽功能

wangting 

已于 2024-08-14 11:42:43 修改

阅读量1.6k

点赞数 37

文章标签： vue.js 前端 javascript

于 2024-08-14 11:41:25 首次发布

本文链接：https://blog.csdn.net/weixin_44109000/article/details/141185291

版权

在vue + elementui 项目中，为满足用户不同的操作习惯，可自定义列表字段的排列

安装sortablejs:

Npm install sortablejs --save

代码部分

列表字段部分，可通过选中和取消，实现列表字段列显隐，是否展示或者隐藏，可通过拖动字段的顺序来实现自定义排版

遍历展示表格字段：

定义字段，和table 表格的字段：

ColList 为要调整的字段的初始化状态

ColData 为表格的字段初始顺序

Mouted 中复制一份数据，调用拖拽的方法：columnDrop：

若需要恢复默认功能，可将colData 恢复到初始状态，也可将调整后的字段顺序和列显隐调接口保存，下次登录进来查询得到自定义的序列

效果图：

主要代码：

<el-form

:model="paramsForm"

label-position="left"

label-width="80px"

@keyup.enter.native="search">

<el-row :gutter="10">

</el-row>

</el-form>

<el-row class="last-row">

<el-button type="primary" icon="el-icon-search" @click="search">

查询

</el-button>

<el-button type="info" icon="el-icon-close" @click="reset">

重置

</el-button>

<el-button type="primary" icon="el-icon-download" @click="exportList">

导出Excel

</el-button>

<el-button type="primary" icon="el-icon-download" @click="batchSettle">

批量结算确认

</el-button>

<el-popover placement="bottom-start" :width="600" style="height: 500px;" trigger="hover">

<el-checkbox v-for="(item, index) in colList" :key="index" @change="handleCheckedBoxChange(item)" v-model="item.status">{{item.title}}</el-checkbox>

</div>

</transition>

<el-button style="float: right;" type="primary">列表布局调整</el-button>

</template>

</el-popover>

</el-row>

<el-table

ref="tableRef"

id="tab1"

v-loading="loading"

fit

border

:data="tableData"

:height="tableHeight"

show-summary

:summary-method="getSummaries"

:cell-class-name="cellStyle"

@select-all="selectItem"

@select="selectItem"

@sort-change="tableSortChange">

<el-table-column v-slot="scope" max-width="50" type="index" label="序号">

<span>{{ scope.$index + (params.page - 1) * params.rows + 1 }}</span>

</el-table-column>

<el-table-column type="selection" :selectable="checkSelectable" width="60" :show-overflow-tooltip="true"/>

<el-table-column v-slot="scope" max-width="80" label="操作">

结算确认

</span>

</el-table-column>

<el-table-column

:width="item.width"

:label="item.title"

:key="index"

v-if="colData[index].status"

v-slot="scope"

align="center">

<a v-if="scope.row.return_num >= 0 && item.prop == 'order_sn'" @click="handleDetail(scope.row)">

</a>

<span v-else> {{scope.row[item.prop]}}</span>

</el-table-column>

</template>

</el-table>

<el-row class="pagination-row">

<el-col :span="16">

<Pagination

:total="params.total"

:page.sync="params.page"

:limit.sync="params.rows"

@pagination="getList" />

</el-col>

<el-col :span="8" class="table-col-show">

<div>

<el-button size="mini" type="primary" @click="saveColData">

保存

</el-button>

<el-button size="mini" type="info" @click="resetColumnData">

恢复默认

</el-button>

</div>

</el-col>

</el-row>

</div>

</template>

import Pagination from '@/components/Pagination'

import { tableEditColumn } from '@/utils/tableEditColumn'

import { getR, postR, exportExcelR } from '@/utils/requestCustomer'

import TableColShowOrHide from '@/components/TableColShowOrHide'

import Sortable from 'sortablejs'

export default {

// eslint-disable-next-line vue/name-property-casing

name: '',

components: {

Pagination，

TableColShowOrHide

mixins: [tableEditColumn],

data() {

return {

tableName: 'queryBySupplierPurchase',

supplierDetailVisible: false,

tableHeight: document.documentElement.clientHeight - 310,

paramsForm: { },

loading: false,

tableData: [],

params: {

// 分页数据

page: 1,

rows: 10,

total: 0

totalFooter: {},

checkedList: [],

newColumnList: [],

colList: [

{ title: '采购单号', prop: "order_sn",width:'130', status: true },

{ title: '确认时间', prop: "confirm_time",width:'120', status: true },

{ title: '供应商', prop: "cus_name",width:'100', status: true },

{ title: '联系人', prop: "contact_name",width:'100', status: true },

{ title: '电话', prop: "contact_phone",width:'100', status: true },

{ title: '税率', prop: "tax_rate",width:'80', status: true },

{ title: '金额（不含税）', prop: "amount_no_tax",width:'140', status: true },

{ title: '税额', prop: "tax_amount",width:'80', status: true },

{ title: '金额（含税）', prop: "amount_tax",width:'100', status: true },

{ title: '优惠金额', prop: "discount",width:'100', status: true },

{ title: '开票状态', prop: "vote_status_name",width:'100', status: true },

{ title: '发票号码', prop: "vote_code",width:'100', status: true },

{ title: '开票时间', prop: "vote_time",width:'200', status: true },

{ title: '结算时间', prop: "pre_time",width:'120', status: true },

{ title: '结算方式', prop: "set_name",width:'110', status: true },

{ title: '结算操作人', prop: "pre_realname",width:'110', status: true },

{ title: '确认操作人', prop: "confirm_user",width:'110', status: true }

colData: [