el-table 列拖拽（无须引入其他插件）
拖拽功能实现参考
结合右上角选中显示表头功能
拖拽
html el-table部分
<div class="w-table" :class="{'w-table_moving': dragState.dragging}">
<el-table stripe ref="multipleTable" :data="list" @selection-change="handleSelectionChange" :height="heights"
v-loading="loading" row-key="id" :cell-class-name="cellClassName"
:header-cell-class-name="headerCellClassName">
<slot name="fixed"></slot>
<el-table-column type="selection" width="55" align="center">
</el-table-column>
<!-- <el-table-column type="index" width="80"> </el-table-column> -->
<el-table-column v-for="(item,index) in bindTableColumns" :prop="item.column_name"
:label="item.column_comment" :fixed="item.fixed" :key="index"
:sortable="item.column_comment=='分配时间'" v-if="item.column_name != 'id'" min-width="120"
:column-key="index.toString()" :render-header="renderHeader">
</el-table-column>
<el-table-column fixed="right" label="操作" min-width="120" align="center">
<template slot-scope="scope">
<el-button @click="detail(scope.row.id)" type="warning" size="mini">
详细资料
</el-button>
</template>
</el-table-column>
</el-table>
</div>
computed: {
bindTableColumns() {
return this.tableHeader.filter((column) => column.show);
},
checkedTableColumns: {
get() {
return this.bindTableColumns.map((column) => column.column_name);
},
set(checked) {
// 设置表格列的显示与隐藏
this.tableHeader.forEach((column, index) => {
console.log(column, checked.includes(column), "cscscsckj");
// 如果选中，则设置列显示
if (checked.includes(column.column_name)) {
console.log(column, "collll");
column.show = true;
} else {
// 如果未选中，则设置列隐藏
column.show = false;
}
});
},
},
},
css样式
.w-table .el-table .darg_start {
background-color: #f3f3f3;
}
.w-table .el-table th {
padding: 0;
}
.w-table .el-table th .virtual {
position: fixed;
display: block;
width: 0;
height: 0;
margin-left: -10px;
background: none;
border: none;
}
.w-table .el-table th.darg_active_left .virtual {
border-left: 2px dotted #666;
z-index: 99;
}
.w-table .el-table th.darg_active_right .virtual {
border-right: 2px dotted #666;
z-index: 99;
}
.w-table .thead-cell {
padding: 0;
display: inline-flex;
flex-direction: column;
align-items: left;
cursor: pointer;
overflow: initial;
}
.w-table .thead-cell:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.w-table.w-table_moving .el-table th .thead-cell {
cursor: move !important;
}
.w-table.w-table_moving .el-table__fixed {
cursor: not-allowed;
}
全部代码（如果看得懂的话）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> -->
<script src="__CDN__/assets/js/import/vue.js"></script>
<link rel="stylesheet" href="__CDN__/assets/js/import/element/index.css">
<script src="__CDN__/assets/js/import/element/index.js"></script>
<script src="__CDN__/assets/js/import/axios.js"></script>
<!-- <script src="../../../../../public/assets/js/import/qs.js"></script> -->
<link rel="stylesheet" href="__CDN__/assets/js/components/index.css">
<!-- <script src="//cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script> -->
<script type="text/javascript" src="__CDN__/assets/js/import/Sortable.min.js"></script>
<script type="text/javascript" src="__CDN__/assets/js/import/vuedraggable.js"></script>
<!-- pc端样式 -->
<style>
body {
margin: 0;
padding: 0;
border: none;
}
</style>
</head>
<body>
<div id="app" class="container" v-cloak>
<div>
<div class="topBtn">
<div class="leftBtn">
<el-button type="primary" size="small" icon="el-icon-refresh" @click="refresh"></el-button>
<el-button size="small" type="primary" :disabled="chosen" @click="distribution">个人分配</el-button>
<el-button size="small" type="info">总记录：{{total}}</el-button>
<el-button size="small" type="warning" plain icon="el-icon-info">已选中：{{chosenLength}}</el-button>
</div>
<div class="rightBtn">
<!-- 列表设置 -->
<el-popover placement="bottom" width="200" trigger="click">
<div>
<label class="label_box">请选择所需的列</label>
<el-checkbox-group v-model="checkedTableColumns" class="columnChose">
<el-checkbox class="checkbox_box" v-for="column in tableHeader" :key="column.column_name"
:label="column.column_name">
{{ column.column_comment }}
</el-checkbox>
</el-checkbox-group>
</div>
<el-button type="primary" slot="reference" icon="el-icon-setting" plain size="small">列表设置
</el-button>
</el-popover>
<el-button @click="searchBtn" icon="el-icon-search" type="primary" size="small"></el-button>
</div>
</div>
<el-drawer title="详细搜索" :visible.sync="searchShow" :modal="false" :show-close="true"
custom-class="demo-drawer" size="25%" :with-header="false">
<div class="demo-drawer__content" style="padding:10px;">
<!-- 搜索条件 -->
<div slot="searchBox">
<div style="margin-top: 10px">
<el-form ref="searchForm" :model="searchForm" label-width="80px">
<el-form-item label="归属公司" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="单选搜索">
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="归属公司" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="多选搜索" multiple>
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="称呼" :label-width="formLabelWidth">
<el-input v-model="searchForm.a" placeholder="模糊搜索" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="手机号" :label-width="formLabelWidth">
<el-input v-model="searchForm.a" placeholder="模糊搜索" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="业务类型" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="单选搜索">
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="客户标签" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="单选搜索">
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="创建人" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="单选搜索">
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="跟进人" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="多选搜索" multiple>
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="导入批次" :label-width="formLabelWidth">
<el-input v-model="searchForm.a" placeholder="模糊搜索" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年级" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="单选搜索">
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="放弃次数" :label-width="formLabelWidth">
<el-input v-model="searchForm.a" placeholder="模糊搜索" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="跟进状态" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="单选搜索">
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="有效状态" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="单选搜索">
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="数据来源" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="多选搜索" multiple>
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="数据来源2" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="多选搜索" multiple>
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="数据来源3" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="多选搜索" multiple>
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="数据来源4" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="多选搜索" multiple>
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="实际数据来源" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="多选搜索" multiple>
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="实际数据来源2" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="多选搜索" multiple>
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="实际数据来源3" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="多选搜索" multiple>
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="实际数据来源4" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="多选搜索" multiple>
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="客户状态" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="多选搜索" multiple>
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="客户类型" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="多选搜索" multiple>
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="分配时间" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="单选搜索">
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="创建时间" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="单选搜索">
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="更新时间" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder="单选搜索">
<el-option v-for="item in companyList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<div class="footer-btn" style="float: right; margin-bottom: 10px">
<el-button @click="clearSearch">清空</el-button>
<el-button @click="submitSearch">搜索</el-button>
</div>
</div>
</div>
</el-drawer>
<!-- 表格部分 -->
<div class="w-table" :class="{'w-table_moving': dragState.dragging}">
<el-table stripe ref="multipleTable" :data="list" @selection-change="handleSelectionChange" :height="heights"
v-loading="loading" row-key="id" :cell-class-name="cellClassName"
:header-cell-class-name="headerCellClassName">
<slot name="fixed"></slot>
<el-table-column type="selection" width="55" align="center">
</el-table-column>
<!-- <el-table-column type="index" width="80"> </el-table-column> -->
<el-table-column v-for="(item,index) in bindTableColumns" :prop="item.column_name"
:label="item.column_comment" :fixed="item.fixed" :key="index"
:sortable="item.column_comment=='分配时间'" v-if="item.column_name != 'id'" min-width="120"
:column-key="index.toString()" :render-header="renderHeader">
</el-table-column>
<el-table-column fixed="right" label="操作" min-width="120" align="center">
<template slot-scope="scope">
<el-button @click="detail(scope.row.id)" type="warning" size="mini">
详细资料
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="page_box">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage4" :page-sizes="pageSizes" :page-size="limit"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
<el-dialog title="分配" :visible.sync="dialogDistribution" :width="formWidth" @close="closeDia"
:close-on-click-modal="false">
<el-form :model="distributionForm" ref="distributionForm" :rules="distributionFormRules">
<el-form-item label="分配人：" prop="people" :label-width="formLabelWidth">
<el-select v-model="distributionForm.people" placeholder="点击下拉可选择分配人" style="width:250px ;">
<el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="是否激活名单：" prop="is" :label-width="formLabelWidth">
<el-radio v-model="distributionForm.is" label="1">是</el-radio>
<el-radio v-model="distributionForm.is" label="2">否</el-radio>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogDistribution = false">取 消</el-button>
<el-button type="primary" @click="distributionSubmit">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="客户称呼修改" :visible.sync="diaAssignName " :width="formWidth" @close="closeDia"
:close-on-click-modal="false">
<el-form :model="assignNameForm" ref="assignNameForm">
<el-form-item label="称呼：" prop="people" :label-width="formLabelWidth">
<el-input v-model="assignNameForm.name" placeholder="称呼修改" autocomplete="off"
style="width: 250px;"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="diaAssignName = false">取 消</el-button>
<el-button type="primary" @click="assignNameSubmit">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="相关实际信息修改" :visible.sync="dialogActual " :width="formWidth" @close="closeDia"
:close-on-click-modal="false">
<el-form :model="actualForm" ref="actualForm">
<el-form-item label="实际创建人" :label-width="formLabelWidth">
<el-select v-model="actualForm.a" placeholder="请选择" style="width: 80%;">
<el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="实际客户数据来源" :label-width="formLabelWidth">
<el-select v-model="actualForm.a" placeholder="请选择" style="width: 80%;">
<el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="实际客户数据来源2" :label-width="formLabelWidth">
<el-select v-model="actualForm.a" placeholder="请选择" style="width: 80%;">
<el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="实际客户数据来源3" :label-width="formLabelWidth">
<el-select v-model="actualForm.a" placeholder="请选择" style="width: 80%;">
<el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogActual = false">取 消</el-button>
<el-button type="primary" @click="actualSubmit">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="查看详情" :visible.sync="dialogDetail" width="80%" @close="closeDia"
:close-on-click-modal="false" top="1vh">
<div class="top-content">
<el-row>
<el-col :span="6" class="each">
<div class="title">称呼</div>
<div class="text">{{detailUp.name}}<el-button icon="el-icon-edit-outline" class="button"
circle @click="assignNameClick()"></el-button>
</div>
</el-col>
<el-col :span="6" class="each">
<div class="title">联系方式</div>
<div class="text">17315383856
<div class="button eyeBtn" @click="showPhone(true)" v-show="!isShowPhone">
<img src="__CDN__/assets/diy/images/m_eye.png" alt="">
</div>
<!-- <el-button class="button" circle @click="showPhone(true)" v-show="!isShowPhone"
icon="el-icon-remove">
</el-button> -->
<div class="button eyeBtn" @click="showPhone(false)" v-show="isShowPhone">
<img src="__CDN__/assets/diy/images/eye.png" alt="">
</div>
<!-- <el-button icon="el-icon-view" class="button" circle @click="showPhone(false)"
v-show="isShowPhone"></el-button> -->
</div>
</el-col>
<el-col :span="6" class="each">
<div class="title">跟进人</div>
<div class="text"></div>
</el-col>
<el-col :span="6" class="each">
<div class="title">创建人/实际创建人</div>
<div class="text">测试子管理员</div>
</el-col>
</el-row>
<el-row>
<el-col :span="6" class="each">
<div class="title">数据来源/实际来源</div>
<div class="text">市场活动</div>
</el-col>
<el-col :span="6" class="each">
<div class="title">数据来源2/实际来源</div>
<div class="text">毛名单（C）</div>
</el-col>
<el-col :span="6" class="each">
<div class="title">数据来源3/实际来源</div>
<div class="text">测试--数据来源3-1 <el-button icon="el-icon-edit-outline" class="button" circle
@click="actualClick()"></el-button>
</div>
</el-col>
<el-col :span="6" class="each">
<div class="title">业务类型</div>
<div class="text">测试专用业务</div>
</el-col>
</el-row>
<el-row>
<el-col :span="6" class="each">
<div class="title">创建时间</div>
<div class="text">2022-04-01 09:17</div>
</el-col>
<el-col :span="6" class="each">
<div class="title">客户状态</div>
<div class="text">激活名单</div>
</el-col>
<el-col :span="6" class="each">
<div class="title">客户标签</div>
<div class="text"></div>
</el-col>
</el-row>
</div>
<div class="main-tab">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="概览" name="1">
<div class="firstTab">
<div class="left">
<div class="firstTab-title" style="margin-bottom: 10px;">详细信息<el-button
icon="el-icon-question" circle style="margin-left: 10px;">
</el-button>
</div>
<el-form ref="firstTabForm" :model="firstTabForm" label-width="100px">
<el-form-item label="家长性别：" label-width="100px">
<el-select v-model="firstTabForm.b" placeholder="请选择" style="width: 95%;">
<el-option v-for="item in genderList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="家长年龄：" label-width="100px">
<el-input-number style="width: 95%;" v-model="firstTabForm.a"
controls-position="right" :min="1" :max="10"></el-input-number>
</el-form-item>
<el-form-item label="一孩信息：" label-width="100px">
<el-col :span="11" style="margin-right: 3%;">
<el-select v-model="firstTabForm.b" placeholder="请选择">
<el-option v-for="item in genderList" :key="item.id"
:label="item.name" :value="item.id">
</el-option>
</el-select>
</el-col>
<el-col :span="11">
<el-select v-model="firstTabForm.b" placeholder="性别">
<el-option v-for="item in genderList" :key="item.id"
:label="item.name" :value="item.id">
</el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="二孩信息：" label-width="100px">
<el-col :span="11" style="margin-right: 3%;">
<el-select v-model="firstTabForm.b" placeholder="请选择">
<el-option v-for="item in genderList" :key="item.id"
:label="item.name" :value="item.id">
</el-option>
</el-select>
</el-col>
<el-col :span="11">
<el-select v-model="firstTabForm.b" placeholder="性别">
<el-option v-for="item in genderList" :key="item.id"
:label="item.name" :value="item.id">
</el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="三孩信息：" label-width="100px">
<el-col :span="11" style="margin-right: 3%;">
<el-select v-model="firstTabForm.b" placeholder="请选择">
<el-option v-for="item in genderList" :key="item.id"
:label="item.name" :value="item.id">
</el-option>
</el-select>
</el-col>
<el-col :span="11">
<el-select v-model="firstTabForm.b" placeholder="性别">
<el-option v-for="item in genderList" :key="item.id"
:label="item.name" :value="item.id">
</el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="所在区域：" label-width="100px">
<el-select v-model="firstTabForm.b" placeholder="请选择" style="width: 95%;">
<el-option v-for="item in genderList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<div class="center">
<!-- <div class="firstTab-title" style="margin-bottom: 10px;">导入初始信息</div> -->
</div>
</div>
<div class="right">
<!-- <div class="firstTab-title" style="margin-bottom: 10px;">咨询内容</div>
<div>7777</div> -->
</div>
</div>
</el-tab-pane>
<el-tab-pane label="分配记录" name="2">配置管理</el-tab-pane>
<el-tab-pane label="跟进记录" name="3">角色管理</el-tab-pane>
<el-tab-pane label="约访记录" name="4">定时任务补偿</el-tab-pane>
<el-tab-pane label="接待反馈记录" name="5">用户管理</el-tab-pane>
<el-tab-pane label="来源记录" name="6">配置管理</el-tab-pane>
<el-tab-pane label="行为记录" name="7">角色管理</el-tab-pane>
<el-tab-pane label="客户状态记录" name="8">定时任务补偿</el-tab-pane>
<el-tab-pane label="推送记录" name="9">定时任务补偿</el-tab-pane>
</el-tabs>
</div>
<!-- <el-form :model="distributionForm" ref="distributionForm" :rules="distributionFormRules">
<el-form-item label="分配人：" prop="people" :label-width="formLabelWidth">
<el-select v-model="distributionForm.people" placeholder="点击下拉可选择分配人" style="width:250px ;">
<el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="是否激活名单：" prop="is" :label-width="formLabelWidth">
<el-radio v-model="distributionForm.is" label="1">是</el-radio>
<el-radio v-model="distributionForm.is" label="2">否</el-radio>
</el-form-item>
</el-form> -->
</el-dialog>
</div>
</div>
</body>
<script>
setTimeout(() => {
new Vue({
el: '#app',
data() {
return {
dragState: {
start: -9, // 起始元素的 index
end: -9, // 移动鼠标时所覆盖的元素 index
dragging: false, // 是否正在拖动
direction: undefined // 拖动方向
},
dialogDistribution: false,
dialogDetail: false,
diaAssignName: false,
dialogActual: false,
isShowPhone: false,
searchShow: false,
showBtn: '',
chosen: true,
chosenLength: 0,
activeName: '1',
distributionForm: {
people: '',
is: ''
},
assignNameForm: {
name: ''
},
actualForm: {
a: ''
},
firstTabForm: {
a: '',
b: ""
},
detailUp: {
name: '测试'
},
charGroup: '', //存储选择的数据的归属事业群
selectionData: [], //处理后的选中的调拨数据
searchForm: {
page: 1,
limit: 10,
a: '',
b: ""
},
genderList: [{
id: 0,
name: '未知'
}, {
id: 1,
name: '男'
}, {
id: 2,
name: '女'
}, ],
loading: true, //表格加载动效
formWidth: "40%",
// 左侧label菜单
label_width: "160",
formLabelWidth: "140px",
page: 1, //页码
limit: 10, //默认每页显示条数
total: 11, //总数
pageSizes: [10, 20, 50, 100, 200],
currentPage4: 1, //当前页码
heights: 0,
multipleSelection: [],
distributionFormRules: {
people: [{
required: true,
message: "请选择",
trigger: "change",
}, ],
},
// 表头数据
tableHead: [{
column_name: "index",
column_comment: "序号",
show: true,
fixed: true,
}, {
column_name: "admin_name",
column_comment: "称呼",
show: true,
fixed: true
},
{
column_name: "group_name",
column_comment: "手机号",
show: true,
fixed: true
},
{
column_name: "company_name",
column_comment: "创建人",
show: true,
},
{
column_name: "use_company_name",
column_comment: "跟进人",
show: true,
},
{
column_name: "department",
column_comment: "一孩年级",
show: true,
},
{
column_name: "user_name",
column_comment: "放弃次数",
show: true,
},
{
column_name: "class_name",
column_comment: "跟进状态",
show: true,
},
{
column_name: "assets_name",
column_comment: "数据来源",
show: true,
},
{
column_name: "brand_name",
column_comment: "数据来源2",
show: true,
},
{
column_name: "model_name",
column_comment: "数据来源3",
show: true,
},
{
column_name: "price",
column_comment: "实际数据来源",
show: true,
},
{
column_name: "status_name",
column_comment: "实际数据来源2",
show: true,
},
{
column_name: "purchase_createtime",
column_comment: "实际数据来源3",
show: true,
},
// {
// column_name: "receipt",
// column_comment: "发票",
// show: true
// },
{
column_name: "supplier_name",
column_comment: "分配部门",
show: true,
},
{
column_name: "bar_code",
column_comment: "客户状态",
show: true,
},
{
column_name: "purchasing_subject_name",
column_comment: "客户类型",
show: true,
},
{
column_name: "address",
column_comment: "分配时间",
show: true,
},
{
column_name: "remarks",
column_comment: "创建时间",
show: true,
},
{
column_name: "surplus",
column_comment: "更新时间",
show: true,
},
],
tableHeader: [{
column_name: "index",
column_comment: "序号",
show: true,
fixed: true,
}, {
column_name: "admin_name",
column_comment: "称呼",
show: true,
fixed: true
},
{
column_name: "group_name",
column_comment: "手机号",
show: true,
fixed: true
},
{
column_name: "company_name",
column_comment: "创建人",
show: true,
},
{
column_name: "use_company_name",
column_comment: "跟进人",
show: true,
},
{
column_name: "department",
column_comment: "一孩年级",
show: true,
},
{
column_name: "user_name",
column_comment: "放弃次数",
show: true,
},
{
column_name: "class_name",
column_comment: "跟进状态",
show: true,
},
{
column_name: "assets_name",
column_comment: "数据来源",
show: true,
},
{
column_name: "brand_name",
column_comment: "数据来源2",
show: true,
},
{
column_name: "model_name",
column_comment: "数据来源3",
show: true,
},
{
column_name: "price",
column_comment: "实际数据来源",
show: true,
},
{
column_name: "status_name",
column_comment: "实际数据来源2",
show: true,
},
{
column_name: "purchase_createtime",
column_comment: "实际数据来源3",
show: true,
},
// {
// column_name: "receipt",
// column_comment: "发票",
// show: true
// },
{
column_name: "supplier_name",
column_comment: "分配部门",
show: true,
},
{
column_name: "bar_code",
column_comment: "客户状态",
show: true,
},
{
column_name: "purchasing_subject_name",
column_comment: "客户类型",
show: true,
},
{
column_name: "address",
column_comment: "分配时间",
show: true,
},
{
column_name: "remarks",
column_comment: "创建时间",
show: true,
},
{
column_name: "surplus",
column_comment: "更新时间",
show: true,
},
],
// 表格数据
list: [{
admin_name: '张三'
}, {
admin_name: '张三'
}, {
admin_name: '张三'
}, {
admin_name: '张三'
}, ],
groupList: [],
companyList: [],
useCompanyList: [],
userList: [],
editId: "",
searchData: {},
dialog: false,
loading: false,
options: [{
value: "HTML",
label: "HTML",
},
{
value: "CSS",
label: "CSS",
},
{
value: "JavaScript",
label: "JavaScript",
},
],
};
},
computed: {
bindTableColumns() {
return this.tableHeader.filter((column) => column.show);
},
checkedTableColumns: {
get() {
return this.bindTableColumns.map((column) => column.column_name);
},
set(checked) {
// 设置表格列的显示与隐藏
this.tableHeader.forEach((column, index) => {
console.log(column, checked.includes(column), "cscscsckj");
// 如果选中，则设置列显示
if (checked.includes(column.column_name)) {
console.log(column, "collll");
column.show = true;
} else {
// 如果未选中，则设置列隐藏
column.show = false;
}
});
},
},
},
mounted() {
this.$nextTick(() => {
// 根据浏览器高度设置初始高度
this.heights =
window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 70;
// 监听浏览器高度变化，修改表格高度
window.onresize = () => {
this.heights =
window.innerHeight - this.$refs.multipleTable.$el.offsetTop -
70;
if (document.body.clientWidth <= 768) {
this.label_width = "0";
this.formWidth = "98%";
} else {
this.label_width = "140";
this.formWidth = "50%";
}
console.log(
this.heights,
this.$refs.multipleTable.$el.offsetTop,
"heights"
);
};
});
},
methods: {
headerCellClassName({
column,
columnIndex
}) {
let active = columnIndex - 1 === this.dragState.end ?
`darg_active_${this.dragState.direction}` : ''
let start = columnIndex - 1 === this.dragState.start ? `darg_start` : ''
return `${active} ${start}`
},
cellClassName({
column,
columnIndex
}) {
return (columnIndex - 1 === this.dragState.start ? `darg_start` : '')
},
renderHeader(createElement, {
column
}) {
return createElement(
'div', {
'class': ['thead-cell'],
on: {
mousedown: ($event) => {
this.handleMouseDown($event, column)
},
mousemove: ($event) => {
this.handleMouseMove($event, column)
}
}
}, [
// 添加 用于显示表头 label
createElement('a', column.label),
// 添加一个空标签用于显示拖动动画
createElement('span', {
'class': ['virtual']
})
])
},
// 按下鼠标开始拖动
handleMouseDown(e, column) {
this.dragState.dragging = true
this.dragState.start = parseInt(column.columnKey)
// 给拖动时的虚拟容器添加宽高
let table = document.getElementsByClassName('w-table')[0]
let virtual = document.getElementsByClassName('virtual')
for (let item of virtual) {
item.style.height = table.clientHeight - 1 + 'px'
item.style.width = item.parentElement.parentElement.clientWidth + 'px'
}
document.addEventListener('mouseup', this.handleMouseUp);
},
// 鼠标放开结束拖动
handleMouseUp() {
this.dragColumn(this.dragState)
// 初始化拖动状态
this.dragState = {
start: -9,
end: -9,
dragging: false,
direction: undefined
}
document.removeEventListener('mouseup', this.handleMouseUp);
},
// 拖动中
handleMouseMove(e, column) {
if (this.dragState.dragging) {
let index = parseInt(column.columnKey) // 记录起始列
if (index - this.dragState.start !== 0) {
this.dragState.direction = index - this.dragState.start < 0 ? 'left' :
'right' // 判断拖动方向
this.dragState.end = parseInt(column.columnKey)
} else {
this.dragState.direction = undefined
}
} else {
return false
}
},
// 拖动易位
dragColumn({
start,
end,
direction
}) {
let tempData = []
let left = direction === 'left'
let min = left ? end : start - 1
let max = left ? start + 1 : end
for (let i = 0; i < this.tableHeader.length; i++) {
if (i === end) {
tempData.push(this.tableHeader[start])
} else if (i > min && i < max) {
tempData.push(this.tableHeader[left ? i - 1 : i + 1])
} else {
tempData.push(this.tableHeader[i])
}
}
this.tableHeader = tempData
},
handleClick() {
},
actualClick() {
this.dialogActual = true
},
showPhone(val) {
this.isShowPhone = val
},
//称呼修改
assignNameClick() {
this.diaAssignName = true
},
distribution() {
this.dialogDistribution = true
},
distributionSubmit() {
},
assignNameSubmit() {
},
actualSubmit() {
},
refresh() {
this.getList()
},
detail(val) {
// this.dialogDetail = true
},
closeDia() {},
changeAdmin(val) {
},
clearSearch() {
this.searchForm = {
page: 1,
limit: 10,
group_id: [],
company_id: [],
class_id: [], //资产类型
user_name: "",
assets_name: "",
department: "", //使用部门
brand_id: [], //品牌
model_id: [], //型号
price: "", //单价
purchase_createtime: "",
supplier_id: [],
purchasing_subject: [], //购买主体
use_company: [], //使用公司
status: [], //资产状态
minPrice: "",
maxPrice: "",
createtime: "",
bar_code: "", //条形码
};
},
submitSearch() {},
//显示发票按钮
showImg(scope) {
},
closeImg() {},
getList() {
this.loading = true;
this.searchForm.page = this.page;
this.searchForm.limit = this.limit;
operationList(this.searchForm)
.then((res) => {
if (res.code == 1) {
this.loading = false;
this.list = res.data.list;
this.total = res.data.total;
} else {
this.$message.error(res.msg);
}
})
.catch((err) => {
this.loading = false;
this.$message.error("服务器繁忙,请重试");
});
},
searchBtn() {
this.searchShow = true
},
// 分页操作
handleSizeChange(val) {
this.page = 1;
this.limit = val;
this.getList();
},
handleCurrentChange(val) {
this.page = val;
this.getList();
},
handleSelectionChange(val) {
console.log(val, "选中的内容");
this.multipleSelection = val;
this.chosenLength = this.multipleSelection.length
if (this.chosenLength == 0) {
this.chosen = true
} else {
this.chosen = false
}
}
},
created() {
// getBuyMainBodyList().then((res) => {
// if (res.code == 1) {
// this.mainBodyList = res.data;
// }
// });
},
watch: {
"tableHeader": {
handler: function (val) {
console.log(val, "tableHeader变化");
},
deep: true,
}
}
});
}, 500)
</script>
<style scoped>
.columnChose {
/* background-color: red; */
width: 50px;
}
[v-cloak] {
display: none;
}
.btnConBox {
display: flex;
}
.btnConBox .btn {
margin-left: 10px;
}
.el-dialog__wrapper {
top: 10%;
bottom: 20%;
}
.el-dialog .el-dialog__body {
width: 95%;
}
.el-input,
.el-select {
width: 100%;
}
.demo-drawer__content .el-select {
width: 100%;
}
.demo-drawer__footer {
margin-top: 20px;
}
.el-form--label-top .el-form-item__label {
padding: 0;
}
.label_box {
display: inline-block;
margin-bottom: 15px;
}
.topBtn {
display: flex;
position: relative;
/* height: 100px; */
padding-top: 10px;
padding-bottom: 10px;
/* background-color: red; */
}
.topBtn .leftBtn {}
.topBtn .rightBtn {
position: absolute;
right: 0;
}
.top-content {
width: 100%;
height: 205px;
/* background: red; */
}
.top-content .each {
padding-left: 30px;
/* margin-bottom: 20px; */
}
.top-content .each .title {
color: rgb(153, 153, 177);
font-size: 12px;
/* margin-bottom: 10px; */
}
.top-content .each .text {
font-size: 15px;
height: 50px;
/* text-align: center; */
line-height: 40px;
/* background-color: red; */
}
.top-content .each .button {
margin-left: 10px;
/* width: 25px;
height: 25px; */
}
.el-icon-remove:before {
background-image: none !important;
}
.el-icon-remove {
background-image: url("__CDN__/assets/diy/images/m_eye.png") !important;
}
.eyeBtn {
display: inline-block;
/* height: 50px; */
/* line-height: 40px; */
box-sizing: border-box;
position: relative;
/* background-color: red; */
}
.eyeBtn img {
display: block;
position: absolute;
top: -18px;
right: -21px;
/* padding-top: 10px; */
width: 27px;
height: 25px;
}
.eyeBtn:hover {
cursor: pointer;
}
.main-tab {
padding-left: 30px;
}
.firstTab {
display: flex;
flex-direction: row;
width: 100%;
height: 400px;
box-sizing: border-box;
/* overflow: hidden; */
}
.firstTab .left {
flex: 2.5;
height: 90%;
box-sizing: border-box;
/* background-color: red; */
}
.firstTab .center {
flex: 1;
height: 90%;
box-sizing: border-box;
/* background-color: gray; */
/* border: 1px solid rgb(153, 153, 177);
border-radius: 10%; */
}
.firstTab .right {
flex: 2;
height: 90%;
box-sizing: border-box;
/* background-color: yellow; */
}
/*
.el-dialog__header {
background-color: rgb(44, 62, 80);
}
.el-dialog__title {
color: white;
} */
.w-table .el-table .darg_start {
background-color: #f3f3f3;
}
.w-table .el-table th {
padding: 0;
}
.w-table .el-table th .virtual {
position: fixed;
display: block;
width: 0;
height: 0;
margin-left: -10px;
background: none;
border: none;
}
.w-table .el-table th.darg_active_left .virtual {
border-left: 2px dotted #666;
z-index: 99;
}
.w-table .el-table th.darg_active_right .virtual {
border-right: 2px dotted #666;
z-index: 99;
}
.w-table .thead-cell {
padding: 0;
display: inline-flex;
flex-direction: column;
align-items: left;
cursor: pointer;
overflow: initial;
}
.w-table .thead-cell:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.w-table.w-table_moving .el-table th .thead-cell {
cursor: move !important;
}
.w-table.w-table_moving .el-table__fixed {
cursor: not-allowed;
}
</style>
列勾选显示时样式塌陷问题解决：
updated() {
this.$refs['multipleTable'].doLayout()
},