VUE+Element 表格拖拽、表格名称排序、表格名称宽度和显示
效果图：
代码：
<template>
<div id="right-box" class="al-content">
<div class="bodyContent panel-blur">
<el-form class="TaBle_box">
<!--命令按钮-->
<div class="ListMune">
<el-button type="info" icon="el-icon-search">查看</el-button>
<el-button type="Green" icon="el-icon-plus">添加</el-button>
<el-button type="Yellow" icon="el-icon-edit">编辑</el-button>
<el-button type="Red" icon="el-icon-close">删除</el-button>
<el-button type="Other" icon="el-icon-finished">审核</el-button>
<el-button type="Other" icon="el-icon-warning-outline">提示</el-button>
<el-popover placement="bottom" width="290" trigger="click" popper-class="bgcolor">
<el-table :data="col" border style="width: 100%" v-model="formThead" class="set_table">
<el-table-column prop="label" label="名称" width="100"></el-table-column>
<el-table-column prop="show" label="是否显示" width="100" align="center">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.show"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="order" label="宽度尺寸">
<template slot-scope="scope">
<el-input v-model="scope.row.width"></el-input>
</template>
</el-table-column>
</el-table>
<!-- <el-button type="Green" @click="orderStor()">确定</el-button> -->
<el-button type="Red" @click="recoverStor()">恢复原始状态</el-button>
<el-button slot="reference" icon="el-icon-s-tools" style="float:right">设置</el-button>
</el-popover>
</div>
<!--表格-->
<el-table
:data="tableData"
:header-cell-style="{color:'white'}"
style="width: 100%"
highlight-current-row
:height="tableHeight"
class="table_input"
>
<el-table-column type="selection" width="55">
<el-table-column type="selection">
<template slot="header"></template>
</el-table-column>
</el-table-column>
<el-table-column type="index" width="55">
<el-table-column type="index">
<template slot="header"></template>
</el-table-column>
</el-table-column>
<template v-for="(item, index) in col">
<el-table-column
:key="`col_${index}`"
:prop="col[index].prop"
:label="item.label"
:width="item.width"
:class-name="item.calssName"
:sortable="item.sortable"
v-if="formThead.includes(item.label) && item.show"
>
<el-table-column :prop="col[index].prop" :width="item.width">
<template slot="header" v-if="col[index].prop == 'nums'">
<el-input v-model="data1.nums" size="mini" placeholder="查询机械编号" />
</template>
<template slot="header" v-if="col[index].prop == 'types'">
<el-input v-model="data1.types" size="mini" placeholder="查询机械类型" />
</template>
<template slot="header" v-if="col[index].prop == 'sign'">
<el-input v-model="data1.sign" size="mini" placeholder="查询机械型号" />
</template>
<template slot="header" v-if="col[index].prop == 'VIN'">
<el-input v-model="data1.VIN" size="mini" placeholder="查询机械VIN" />
</template>
<template slot="header" v-if="col[index].prop == 'norm'">
<el-input v-model="data1.norm" size="mini" placeholder="查询排放标准" />
</template>
<template slot="header" v-if="col[index].prop == 'state'">
<el-select v-model="data1.state" size="mini" placeholder="查询状态">
<el-option label="待审核" value="dsh"></el-option>
<el-option label="审核通过" value="shtg"></el-option>
<el-option label="审核失败" value="shsb"></el-option>
</el-select>
</template>
<template slot="header" v-if="col[index].prop == 'cause'">
<el-input v-model="data1.cause" size="mini" placeholder="查询原因" />
</template>
</el-table-column>
</el-table-column>
</template>
</el-table>
<!--分页-->
<div class="pagebox">
<el-row :gutter="0">
<el-col :span="6" class="Page_font">
当前显示
<font color="#209d90">1-10</font> 条
</el-col>
<el-col :span="18">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[10, 20, 30, 40]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
></el-pagination>
</el-col>
</el-row>
</div>
</el-form>
</div>
</div>
</template>
<script>
import Sortable from "sortablejs";
const arr = [
"机械编号",
"机械类型",
"机械型号",
"机械VIN码",
"排放标准",
"状态",
"原因"
];
export default {
data() {
return {
tableData: [
{
id: "1",
nums: "201908210001",
types: "挖掘机",
sign: "型号一",
VIN: "RFg65765887877L097",
norm: "国II",
state: "待审核",
cause: ""
},
{
id: "2",
nums: "201908210001",
types: "挖掘机",
sign: "型号一",
VIN: "RFg65765887877L097",
norm: "国II",
state: "待审核",
cause: ""
},
{
id: "3",
nums: "201908210001",
types: "挖掘机",
sign: "型号一",
VIN: "RFg65765887877L097",
norm: "国II",
state: "待审核",
cause: "图片未提供"
},
{
id: "4",
nums: "201908210001",
types: "挖掘机",
sign: "型号一",
VIN: "RFg65765887877L097",
norm: "国II",
state: "待审核",
cause: "排放阶段输入有误"
}
],
oldcol: [
{
label: "机械编号",
prop: "nums",
calssName: "",
sortable: false,
show: true,
width: 200
},
{
label: "机械类型",
prop: "types",
calssName: "",
sortable: false,
show: true,
width: 180
},
{
label: "机械型号",
prop: "sign",
calssName: "",
sortable: false,
show: true,
width: 200
},
{
label: "机械VIN码",
prop: "VIN",
calssName: "",
sortable: false,
show: true,
width: 240
},
{
label: "排放标准",
prop: "norm",
calssName: "",
sortable: false,
show: true,
width: 160
},
{
label: "状态",
prop: "state",
calssName: "",
sortable: false,
show: true,
width: 160
},
{
label: "原因",
prop: "cause",
calssName: "",
sortable: false,
show: true
}
],
col: [
{
label: "机械编号",
prop: "nums",
calssName: "",
sortable: false,
show: true,
width: 200
},
{
label: "机械类型",
prop: "types",
calssName: "",
sortable: false,
show: true,
width: 180
},
{
label: "机械型号",
prop: "sign",
calssName: "",
sortable: false,
show: true,
width: 200
},
{
label: "机械VIN码",
prop: "VIN",
calssName: "",
sortable: false,
show: true,
width: 240
},
{
label: "排放标准",
prop: "norm",
calssName: "",
sortable: false,
show: true,
width: 160
},
{
label: "状态",
prop: "state",
calssName: "",
sortable: false,
show: true,
width: 160
},
{
label: "原因",
prop: "cause",
calssName: "",
sortable: false,
show: true
}
],
realStartIndex: 2, //去掉复选框和序号获取真实Index
formThead: arr,
form: {
name: "",
region: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: "",
desc: ""
}, //表格搜索框
data1: {
nums: "",
types: "",
sign: "",
VIN: "",
norm: "",
state: "",
cause: ""
},
items: [
{ name: "发动机编号", value: "2019Al47302d0001" },
{ name: "机械类型", value: "挖掘机" },
{ name: "机械型号", value: "HIdes1332" },
{ name: "型式核准号", value: "核准号一" },
{ name: "排放阶段", value: "国V" },
{ name: "机械所属区域", value: "大名县" },
{ name: "机械产品规格型号", value: "HIdes1332" }
],
fileList: [],
formLabelWidth: "130px",
formLabelWidth2: "160px",
tableHeight: "",
currentPage4: 4,
value1: ""
};
},
methods: {
confirm() {
this.TipSucceed = false;
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
//设置按钮行拖到
rowDrop() {
var _this = this;
var $ul = document.querySelector(
".set_table .el-table__body-wrapper tbody"
);
new Sortable($ul, {
onUpdate: function(event) {
//修改表格数据顺序
var newIndex = event.newIndex,
oldIndex = event.oldIndex,
$li = $ul.children[newIndex],
$oldLi = $ul.children[oldIndex];
// 先删除移动的节点
$ul.removeChild($li);
// 再插入移动的节点到原有节点，还原了移动的操作
if (newIndex > oldIndex) {
$ul.insertBefore($li, $oldLi);
} else {
$ul.insertBefore($li, $oldLi.nextSibling);
}
// 更新表格数组
var item = _this.col.splice(oldIndex, 1); //删除
_this.col.splice(newIndex, 0, item[0]); //添加
},
animation: 150
});
},
// 列拖动
columnDrop() {
const wrapperTr = document.querySelector(
".table_input .el-table__header-wrapper tr"
);
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
filter: ".filtered",
onEnd: evt => {
const oldItem = this.col[evt.oldIndex - 2];
//由于数据绑定是从索引2开始，
let IndexNumber = this.realStartIndex;
this.col.splice(evt.oldIndex - IndexNumber, 1);
this.col.splice(evt.newIndex - IndexNumber, 0, oldItem);
console.log(evt.oldIndex, evt.newIndex);
}
});
},
TableHeight() {
this.tableHeight = window.innerHeight - 300 + "px";
},
//排序对比参数
compare(arg) {
return function(a, b) {
return a[arg] - b[arg];
};
},
//点击确定调用排序方法
orderStor() {
this.col = this.col.sort(this.compare("order"));
},
//排序恢复厂家设置
recoverStor() {
this.col = JSON.parse(JSON.stringify(this.oldcol));
}
},
mounted() {
this.columnDrop();
this.rowDrop();
},
created() {
window.addEventListener("resize", this.TableHeight);
this.TableHeight();
}
};
</script>
<style>
.el-popover.bgcolor {
background: #183345;
border: 1px solid #209d90;
}
</style>
<style scoped>
.Views_box >>> .el-dialog__body {
height: 600px;
overflow: auto;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
}
.el-table >>> th.is-leaf {
border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
border-right: transparent;
}
</style>
浙公网安备 33010602011771号