Usage Components
yarn add sortablejs --save
Chinese website ()
The following code is just an example, you can learn from it and implement their respective business functions.
<template>
<div>
<el-button type="primary" @click="Switch list(1)">List one</el-button>
<el-button type="success" @click="Switch list(2)">List 2</el-button>
<el-table
v-if="DataListShow === 1"
:data="DataList1"
ref="refTable1"
class="ELtable"
size="small"
stripe
:key="tableKey1"
:row-key="
(row) => {
return ;
}
"
>
<el-table-column
label="coding"
align="center"
prop="label"
></el-table-column>
<el-table-column
label="name"
align="center"
prop="label"
></el-table-column>
</el-table>
<el-table
v-if="DataListShow === 2"
:data="DataList2"
ref="refTable2"
class="ELtable"
size="small"
stripe
:key="tableKey2"
:row-key="
(row) => {
return ;
}
"
>
<el-table-column
label="coding"
align="center"
prop="prop"
></el-table-column>
<el-table-column
label="name"
align="center"
prop="label"
></el-table-column>
</el-table>
</div>
</template>
<script>
// Introduce Sortable table drag and drop plug-inimport Sortable from "sortablejs";
//Introduce simulated data dataimport DataList1 from "./";
import DataList2 from "./";
export default {
name: 'HelloWorld',
data(){
return {
DataListShow:1,
//Configuration of the first table tableKey1:0,
DataList1:DataList1,
//Configuration of the second table tableKey2:0,
DataList2:DataList2,
}
},
mounted() {
//Start drag this.rowDrop1();
},
methods:{
Switch list(List number){
= List number
this.$nextTick(() => {
if(List number === 1){
//Drag and drag the startup list this.rowDrop1();
}else{
//Drag and drag the start list two this.rowDrop2();
}
});
},
/**
* The first form
* Row drag
*/
rowDrop1() {
= this
const _this = this;
const wrapperTr = this.$refs.refTable1.$(".el-table__body-wrapper tbody");
= (wrapperTr, {
handle:'.el-table__row',
animation: 350,
delay: 0,
easing:'cubic-bezier(0.34, 1.56, 0.64, 1)',
onEnd: (evt) => {
const oldItem = _this.DataList1[];
_this.(, 1);
_this.(, 0, oldItem);
_this.reDrawTable1();
// Repaint it once after each drag },
});
},
/**
* The first form
* Trigger table repaint
*/
reDrawTable1() {
this.tableKey1 = ();
this.$nextTick(() => {
// ();
this.rowDrop1();
});
},
/**
* The second form
* Row drag
*/
rowDrop2() {
const _this = this;
// ("data", ); const wrapperTr = this.$refs.refTable2.$(".el-table__body-wrapper tbody");
= (wrapperTr, {
handle:'.el-table__row',
animation: 350,
delay: 0,
easing:'cubic-bezier(0.34, 1.56, 0.64, 1)',
onEnd: (evt) => {
const oldItem = _this.DataList2[];
_this.(, 1);
_this.(, 0, oldItem);
_this.reDrawTable2();
// Repaint it once after each drag },
});
},
/**
* The second form
* Trigger table repaint
*/
reDrawTable2() {
this.tableKey2 = ();
this.$nextTick(() => {
// ();
this.rowDrop2();
});
},
}
}
</script>export default [
{
disabled: true,
isCheck: true,
fixed:true,
width: "100px",
label: "Name",
prop: "name"
},
{
disabled: false,
isCheck: true,
width: "180px",
label: "unit",
prop: "unitName"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "department",
prop: "departmentName"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "gender",
prop: "sex"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "Date of Birth",
prop: "birthday"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "Local place",
prop: "places"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "Join working hours",
prop: "workTime"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "Administrative Position",
prop: "duty"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "Administrative Position Time",
prop: "dutyTime"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "Administrative rank",
prop: "jobGrade"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "Administrative rank time",
prop: "jobGradeTime"
},
{
disabled: false,
isCheck: true,
width: "110px",
label: "grade",
prop: "rank"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "Level time",
prop: "rankTime"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "Legal Position",
prop: "legislation"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "Legal position time",
prop: "legislationTime"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "Full-time education",
prop: "fullTimeEducation"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "Full-time degree",
prop: "fullTimeDegree"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "Full-time major",
prop: "fullTimeMajor"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "Political appearance",
prop: "politicsStatus"
},
];export default [
{
disabled: true,
isCheck: true,
fixed:true,
width: "100px",
label: "still",
prop: "name"
},
{
disabled: false,
isCheck: true,
width: "180px",
label: "Brother Sa",
prop: "unitName"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "official",
prop: "departmentName"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "physical education",
prop: "sex"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "Smart and capable",
prop: "birthday"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "Can be extensive",
prop: "places"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "Issuing an announcement",
prop: "workTime"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "People agree",
prop: "duty"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "Send it to a large extent",
prop: "dutyTime"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "It's too much",
prop: "jobGrade"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "Try Second Canteen",
prop: "jobGradeTime"
},
{
disabled: false,
isCheck: true,
width: "110px",
label: "result",
prop: "rank"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "Separation Table",
prop: "rankTime"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "Volvo II",
prop: "legislation"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "Just sports and",
prop: "legislationTime"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "Fire Pipelines",
prop: "fullTimeEducation"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "Propaganda Department Cost",
prop: "fullTimeDegree"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "I understand you help you",
prop: "fullTimeMajor"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "Probably a rice cooker",
prop: "politicsStatus"
},
];The above is the detailed content of vue implementing the front-end list drag function. For more information about vue list drag, please follow my other related articles!