当前位置：网站首页>El table column drag and drop (no need to introduce other plug-ins)
El table column drag and drop (no need to introduce other plug-ins)
2022-07-19 13:08:00 【Colorful cat worm】
Drag function implementation reference
Select the display header function in the upper right corner
html el-table part
<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==' Allocate time '" 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=" operation " min-width="120" align="center">
<template slot-scope="scope">
<el-button @click="detail(scope.row.id)" type="warning" size="mini">
Detailed information
</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) {
// Set the display and hide of table columns
this.tableHeader.forEach((column, index) => {
console.log(column, checked.includes(column), "cscscsckj");
// If checked, , Set the column display
if (checked.includes(column.column_name)) {
console.log(column, "collll");
column.show = true;
} else {
// If... Is not selected , Set column hidden
column.show = false;
}
});
},
},
},
css style
.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;
}
All the code （ If you can understand ）
<!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 End style -->
<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"> Personal distribution </el-button>
<el-button size="small" type="info"> General record ：{
{
total}}</el-button>
<el-button size="small" type="warning" plain icon="el-icon-info"> Selected ：{
{
chosenLength}}</el-button>
</div>
<div class="rightBtn">
<!-- List settings -->
<el-popover placement="bottom" width="200" trigger="click">
<div>
<label class="label_box"> Please select the desired column </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"> List settings
</el-button>
</el-popover>
<el-button @click="searchBtn" icon="el-icon-search" type="primary" size="small"></el-button>
</div>
</div>
<el-drawer title=" Detailed search " :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;">
<!-- search criteria -->
<div slot="searchBox">
<div style="margin-top: 10px">
<el-form ref="searchForm" :model="searchForm" label-width="80px">
<el-form-item label=" Belonging to the company " :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Radio search ">
<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=" Belonging to the company " :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Multi select Search " 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=" call " :label-width="formLabelWidth">
<el-input v-model="searchForm.a" placeholder=" Fuzzy search " autocomplete="off"></el-input>
</el-form-item>
<el-form-item label=" cell-phone number " :label-width="formLabelWidth">
<el-input v-model="searchForm.a" placeholder=" Fuzzy search " autocomplete="off"></el-input>
</el-form-item>
<el-form-item label=" Business types " :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Radio search ">
<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=" Customer label " :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Radio search ">
<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=" founder " :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Radio search ">
<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=" Follow up person " :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Multi select Search " 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=" Import batch " :label-width="formLabelWidth">
<el-input v-model="searchForm.a" placeholder=" Fuzzy search " autocomplete="off"></el-input>
</el-form-item>
<el-form-item label=" grade " :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Radio search ">
<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=" Give up times " :label-width="formLabelWidth">
<el-input v-model="searchForm.a" placeholder=" Fuzzy search " autocomplete="off"></el-input>
</el-form-item>
<el-form-item label=" Follow up status " :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Radio search ">
<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=" Effective state " :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Radio search ">
<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=" Data sources " :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Multi select Search " 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=" Data sources 2" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Multi select Search " 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=" Data sources 3" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Multi select Search " 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=" Data sources 4" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Multi select Search " 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=" Actual data source " :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Multi select Search " 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=" Actual data source 2" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Multi select Search " 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=" Actual data source 3" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Multi select Search " 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=" Actual data source 4" :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Multi select Search " 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=" Customer status " :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Multi select Search " 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=" Customer type " :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Multi select Search " 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=" Allocate time " :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Radio search ">
<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=" Creation time " :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Radio search ">
<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=" Update time " :label-width="formLabelWidth">
<el-select v-model="searchForm.b" placeholder=" Radio search ">
<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"> Empty </el-button>
<el-button @click="submitSearch"> Search for </el-button>
</div>
</div>
</div>
</el-drawer>
<!-- The form section -->
<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==' Allocate time '" 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=" operation " min-width="120" align="center">
<template slot-scope="scope">
<el-button @click="detail(scope.row.id)" type="warning" size="mini">
Detailed information
</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=" Distribute " :visible.sync="dialogDistribution" :width="formWidth" @close="closeDia"
:close-on-click-modal="false">
<el-form :model="distributionForm" ref="distributionForm" :rules="distributionFormRules">
<el-form-item label=" Allocator ：" prop="people" :label-width="formLabelWidth">
<el-select v-model="distributionForm.people" placeholder=" Click the drop-down to select the assignor " 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=" Whether to activate the list ：" prop="is" :label-width="formLabelWidth">
<el-radio v-model="distributionForm.is" label="1"> yes </el-radio>
<el-radio v-model="distributionForm.is" label="2"> no </el-radio>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogDistribution = false"> take eliminate </el-button>
<el-button type="primary" @click="distributionSubmit"> indeed set </el-button>
</div>
</el-dialog>
<el-dialog title=" Customer address modification " :visible.sync="diaAssignName " :width="formWidth" @close="closeDia"
:close-on-click-modal="false">
<el-form :model="assignNameForm" ref="assignNameForm">
<el-form-item label=" call ：" prop="people" :label-width="formLabelWidth">
<el-input v-model="assignNameForm.name" placeholder=" Address modification " autocomplete="off"
style="width: 250px;"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="diaAssignName = false"> take eliminate </el-button>
<el-button type="primary" @click="assignNameSubmit"> indeed set </el-button>
</div>
</el-dialog>
<el-dialog title=" Relevant actual information modification " :visible.sync="dialogActual " :width="formWidth" @close="closeDia"
:close-on-click-modal="false">
<el-form :model="actualForm" ref="actualForm">
<el-form-item label=" Actual creator " :label-width="formLabelWidth">
<el-select v-model="actualForm.a" placeholder=" Please select " 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=" Actual customer data source " :label-width="formLabelWidth">
<el-select v-model="actualForm.a" placeholder=" Please select " 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=" Actual customer data source 2" :label-width="formLabelWidth">
<el-select v-model="actualForm.a" placeholder=" Please select " 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=" Actual customer data source 3" :label-width="formLabelWidth">
<el-select v-model="actualForm.a" placeholder=" Please select " 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"> take eliminate </el-button>
<el-button type="primary" @click="actualSubmit"> indeed set </el-button>
</div>
</el-dialog>
<el-dialog title=" Check the details " :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"> call </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"> Contact information </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"> Follow up person </div>
<div class="text"></div>
</el-col>
<el-col :span="6" class="each">
<div class="title"> founder / Actual creator </div>
<div class="text"> Test sub administrator </div>
</el-col>
</el-row>
<el-row>
<el-col :span="6" class="each">
<div class="title"> Data sources / The actual source </div>
<div class="text"> Marketing activities </div>
</el-col>
<el-col :span="6" class="each">
<div class="title"> Data sources 2/ The actual source </div>
<div class="text"> Gross list （C）</div>
</el-col>
<el-col :span="6" class="each">
<div class="title"> Data sources 3/ The actual source </div>
<div class="text"> test -- Data sources 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"> Business types </div>
<div class="text"> Test special business </div>
</el-col>
</el-row>
<el-row>
<el-col :span="6" class="each">
<div class="title"> Creation time </div>
<div class="text">2022-04-01 09:17</div>
</el-col>
<el-col :span="6" class="each">
<div class="title"> Customer status </div>
<div class="text"> Activate the list </div>
</el-col>
<el-col :span="6" class="each">
<div class="title"> Customer label </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=" overview " name="1">
<div class="firstTab">
<div class="left">
<div class="firstTab-title" style="margin-bottom: 10px;"> Details <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=" Parent gender ：" label-width="100px">
<el-select v-model="firstTabForm.b" placeholder=" Please select " 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=" Parents' age ：" 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=" One child information ：" label-width="100px">
<el-col :span="11" style="margin-right: 3%;">
<el-select v-model="firstTabForm.b" placeholder=" Please select ">
<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=" Gender ">
<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=" Second child information ：" label-width="100px">
<el-col :span="11" style="margin-right: 3%;">
<el-select v-model="firstTabForm.b" placeholder=" Please select ">
<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=" Gender ">
<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=" Three child information ：" label-width="100px">
<el-col :span="11" style="margin-right: 3%;">
<el-select v-model="firstTabForm.b" placeholder=" Please select ">
<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=" Gender ">
<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=" Area ：" label-width="100px">
<el-select v-model="firstTabForm.b" placeholder=" Please select " 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;"> Import initial information </div> -->
</div>
</div>
<div class="right">
<!-- <div class="firstTab-title" style="margin-bottom: 10px;"> Consultation content </div>
<div>7777</div> -->
</div>
</div>
</el-tab-pane>
<el-tab-pane label=" Allocation records " name="2"> Configuration Management </el-tab-pane>
<el-tab-pane label=" Follow up records " name="3"> Role management </el-tab-pane>
<el-tab-pane label=" Appointment records " name="4"> Timed task compensation </el-tab-pane>
<el-tab-pane label=" Reception feedback records " name="5"> User management </el-tab-pane>
<el-tab-pane label=" Source record " name="6"> Configuration Management </el-tab-pane>
<el-tab-pane label=" Behavior record " name="7"> Role management </el-tab-pane>
<el-tab-pane label=" Customer status record " name="8"> Timed task compensation </el-tab-pane>
<el-tab-pane label=" Push records " name="9"> Timed task compensation </el-tab-pane>
</el-tabs>
</div>
<!-- <el-form :model="distributionForm" ref="distributionForm" :rules="distributionFormRules">
<el-form-item label=" Allocator ：" prop="people" :label-width="formLabelWidth">
<el-select v-model="distributionForm.people" placeholder=" Click the drop-down to select the assignor " 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=" Whether to activate the list ：" prop="is" :label-width="formLabelWidth">
<el-radio v-model="distributionForm.is" label="1"> yes </el-radio>
<el-radio v-model="distributionForm.is" label="2"> no </el-radio>
</el-form-item>
</el-form> -->
</el-dialog>
</div>
</div>
</body>
<script>
setTimeout(() => {
new Vue({
el: '#app',
data() {
return {
dragState: {
start: -9, // Of the starting element index
end: -9, // The element covered when moving the mouse index
dragging: false, // Whether you are dragging
direction: undefined // Drag direction
},
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: ' test '
},
charGroup: '', // The business group that stores the selected data
selectionData: [], // Selected transfer data after processing
searchForm: {
page: 1,
limit: 10,
a: '',
b: ""
},
genderList: [{
id: 0,
name: ' Unknown '
}, {
id: 1,
name: ' male '
}, {
id: 2,
name: ' Woman '
}, ],
loading: true, // Table loading dynamics
formWidth: "40%",
// left label menu
label_width: "160",
formLabelWidth: "140px",
page: 1, // Page number
limit: 10, // By default, the number of items displayed per page
total: 11, // total
pageSizes: [10, 20, 50, 100, 200],
currentPage4: 1, // The current page number
heights: 0,
multipleSelection: [],
distributionFormRules: {
people: [{
required: true,
message: " Please select ",
trigger: "change",
}, ],
},
// Header data
tableHead: [{
column_name: "index",
column_comment: " Serial number ",
show: true,
fixed: true,
}, {
column_name: "admin_name",
column_comment: " call ",
show: true,
fixed: true
},
{
column_name: "group_name",
column_comment: " cell-phone number ",
show: true,
fixed: true
},
{
column_name: "company_name",
column_comment: " founder ",
show: true,
},
{
column_name: "use_company_name",
column_comment: " Follow up person ",
show: true,
},
{
column_name: "department",
column_comment: " One child grade ",
show: true,
},
{
column_name: "user_name",
column_comment: " Give up times ",
show: true,
},
{
column_name: "class_name",
column_comment: " Follow up status ",
show: true,
},
{
column_name: "assets_name",
column_comment: " Data sources ",
show: true,
},
{
column_name: "brand_name",
column_comment: " Data sources 2",
show: true,
},
{
column_name: "model_name",
column_comment: " Data sources 3",
show: true,
},
{
column_name: "price",
column_comment: " Actual data source ",
show: true,
},
{
column_name: "status_name",
column_comment: " Actual data source 2",
show: true,
},
{
column_name: "purchase_createtime",
column_comment: " Actual data source 3",
show: true,
},
// {
// column_name: "receipt",
// column_comment: " invoice ",
// show: true
// },
{
column_name: "supplier_name",
column_comment: " Distribution Department ",
show: true,
},
{
column_name: "bar_code",
column_comment: " Customer status ",
show: true,
},
{
column_name: "purchasing_subject_name",
column_comment: " Customer type ",
show: true,
},
{
column_name: "address",
column_comment: " Allocate time ",
show: true,
},
{
column_name: "remarks",
column_comment: " Creation time ",
show: true,
},
{
column_name: "surplus",
column_comment: " Update time ",
show: true,
},
],
tableHeader: [{
column_name: "index",
column_comment: " Serial number ",
show: true,
fixed: true,
}, {
column_name: "admin_name",
column_comment: " call ",
show: true,
fixed: true
},
{
column_name: "group_name",
column_comment: " cell-phone number ",
show: true,
fixed: true
},
{
column_name: "company_name",
column_comment: " founder ",
show: true,
},
{
column_name: "use_company_name",
column_comment: " Follow up person ",
show: true,
},
{
column_name: "department",
column_comment: " One child grade ",
show: true,
},
{
column_name: "user_name",
column_comment: " Give up times ",
show: true,
},
{
column_name: "class_name",
column_comment: " Follow up status ",
show: true,
},
{
column_name: "assets_name",
column_comment: " Data sources ",
show: true,
},
{
column_name: "brand_name",
column_comment: " Data sources 2",
show: true,
},
{
column_name: "model_name",
column_comment: " Data sources 3",
show: true,
},
{
column_name: "price",
column_comment: " Actual data source ",
show: true,
},
{
column_name: "status_name",
column_comment: " Actual data source 2",
show: true,
},
{
column_name: "purchase_createtime",
column_comment: " Actual data source 3",
show: true,
},
// {
// column_name: "receipt",
// column_comment: " invoice ",
// show: true
// },
{
column_name: "supplier_name",
column_comment: " Distribution Department ",
show: true,
},
{
column_name: "bar_code",
column_comment: " Customer status ",
show: true,
},
{
column_name: "purchasing_subject_name",
column_comment: " Customer type ",
show: true,
},
{
column_name: "address",
column_comment: " Allocate time ",
show: true,
},
{
column_name: "remarks",
column_comment: " Creation time ",
show: true,
},
{
column_name: "surplus",
column_comment: " Update time ",
show: true,
},
],
// Tabular data
list: [{
admin_name: ' Zhang San '
}, {
admin_name: ' Zhang San '
}, {
admin_name: ' Zhang San '
}, {
admin_name: ' Zhang San '
}, ],
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) {
// Set the display and hide of table columns
this.tableHeader.forEach((column, index) => {
console.log(column, checked.includes(column), "cscscsckj");
// If checked, , Set the column display
if (checked.includes(column.column_name)) {
console.log(column, "collll");
column.show = true;
} else {
// If... Is not selected , Set column hidden
column.show = false;
}
});
},
},
},
mounted() {
this.$nextTick(() => {
// Set the initial height according to the browser height
this.heights =
window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 70;
// Monitor browser height changes , Modify table height
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)
}
}
}, [
// add to <a> Used to display the header label
createElement('a', column.label),
// Add an empty label to display the drag animation
createElement('span', {
'class': ['virtual']
})
])
},
// Press the mouse to start dragging
handleMouseDown(e, column) {
this.dragState.dragging = true
this.dragState.start = parseInt(column.columnKey)
// Add width and height to the virtual container when dragging
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);
},
// Release the mouse and end dragging
handleMouseUp() {
this.dragColumn(this.dragState)
// Initialize drag state
this.dragState = {
start: -9,
end: -9,
dragging: false,
direction: undefined
}
document.removeEventListener('mouseup', this.handleMouseUp);
},
// Dragging
handleMouseMove(e, column) {
if (this.dragState.dragging) {
let index = parseInt(column.columnKey) // Record start column
if (index - this.dragState.start !== 0) {
this.dragState.direction = index - this.dragState.start < 0 ? 'left' :
'right' // Determine the drag direction
this.dragState.end = parseInt(column.columnKey)
} else {
this.dragState.direction = undefined
}
} else {
return false
}
},
// Drag translocation
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
},
// Address modification
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: [], // Asset type
user_name: "",
assets_name: "",
department: "", // User department
brand_id: [], // brand
model_id: [], // model
price: "", // The unit price
purchase_createtime: "",
supplier_id: [],
purchasing_subject: [], // The buyer
use_company: [], // Use company
status: [], // Asset status
minPrice: "",
maxPrice: "",
createtime: "",
bar_code: "", // Bar code
};
},
submitSearch() {
},
// Show Invoice button
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(" Server busy , Please try again ");
});
},
searchBtn() {
this.searchShow = true
},
// paging
handleSizeChange(val) {
this.page = 1;
this.limit = val;
this.getList();
},
handleCurrentChange(val) {
this.page = val;
this.getList();
},
handleSelectionChange(val) {
console.log(val, " Selected content ");
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 change ");
},
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>
边栏推荐
- 整理了一份通用的内存管理驱动代码
- [pyGame learning notes] 6 Cursor mouse cursor
- Mysql database tables add fields, delete fields, modify the arrangement of fields and other operations, but not soon
- O & M LITTLE WHITE Growth record - architecture week 6
- npm err! ant-design- [email protected] build: `umi build`
- CMOS switch learning (I)
- MOF customized materials | bimetallic CuNi MOF nano materials | core-shell structure [email protected] Nanocomposites | zif-8/ poly
- [dynamic planning]dp27 jumping game (II) - medium
- When will the deflationary market reverse? How should we operate? 2020-03-13
- Lazy to the bone, I am too lazy to write articles in CSDN. I write articles based on selenium simulation
猜你喜欢
XML modeling (easy to learn)
Att & CK actual combat series - red team actual combat (-)
LeetCode 0565. Array nesting: convert to graph + modify in place の optimization
LeetCode 0118. 杨辉三角
ASP. Net collaborative OA office service management platform source code
Advanced C language -- character function and string function
力扣413-等差数列划分——动态规划
【刷题记录】13. 罗马数字转整数
XML建模(简单易学)
力扣70-爬楼梯——动态规划
随机推荐
VMware imports ova/ovf virtual machine files
The latest Jilin construction safety officer simulation question bank and answers in 2022
[pyGame learning notes] 6 Cursor mouse cursor
时序逻辑与组合逻辑的reg
Common bug precautions of audio control
Interview difficulties: difficulties in implementing distributed session, this is enough!
Lazy to the bone, I am too lazy to write articles in CSDN. I write articles based on selenium simulation
Gold nanoparticles modified mil-101 framework material (AuNPs / mil-101) / loaded cof-tppa-1 (Au NPs / cof-tppa-1) | Qiyue reagent
基于STM32设计的云端健康管理系统(采用阿里云物联网平台)
最小交换次数
Flask源码分析（三）：上下文
通货收缩的市场何时反转？我们该如何操作？2020-03-13
Advanced C language -- character function and string function
Chitosan coated pcn224 nanoparticles | metal organic skeleton fe-mil-88nh2 | nickel based MOF material (Ni MOF / NF)
Label ball problem
又错了，字节对齐及＃pragma pack的使用
Reg of sequential logic and combinatorial logic
How can MySQL delete data tables and associated data tables
How to invest scientifically and rationally when the global financial crisis strikes? 2020-03-17
Mysql database tables add fields, delete fields, modify the arrangement of fields and other operations, but not soon