el-table
使用方法:
一:在页面中导入子组件
import GtableSetting from "@/components/GtableSetting";
二:页面引用
components: {
GtableSetting,
},
三:使用
columnList-->为已选择字段
noColumnList--->为未选字段
(columnList noColumnList)要保存数据,需要后端提供动态的数据,目前是前端写死的
dialogVisible-->表格的显示隐藏
submitPopupData-->提交表格的事件
<GtableSetting
:columnList.sync="columnList"
:noColumnList.sync="noColumnList"
:visible.sync="dialogVisible"
@submitPopupData="submitPopupData"
>
</GtableSetting>
父页面代码(我直接拿过来了,事件都在里面)
<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="公告标题" prop="noticeTitle">
<el-input
v-model="queryParams.noticeTitle"
placeholder="请输入公告标题"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="操作人员" prop="createBy">
<el-input
v-model="queryParams.createBy"
placeholder="请输入操作人员"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="类型" prop="noticeType">
<el-select
v-model="queryParams.noticeType"
placeholder="公告类型"
clearable
size="small"
>
<el-option
v-for="dict in typeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:notice:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:notice:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:notice:remove']"
>删除</el-button
>
</el-col>
<el-col style="float: right" :span="2">
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
style="float: left"
></right-toolbar>
<i
class="el-icon-setting"
style="
color: #2e54ec;
margin: 4px 0 0 12px;
font-size: 20px;
cursor: pointer;
"
@click="tableSetup"
></i>
</el-col>
</el-row>
<el-table
v-loading="loading"
:data="noticeList"
@selection-change="handleSelectionChange"
style="width: 100%"
>
<el-table-column type="selection" width="55" align="center" fixed />
<el-table-column
label="序号"
align="center"
prop="noticeId"
width="80"
fixed
/>
<el-table-column
v-for="(item, index) in columnList"
:key="index"
:label="item.label"
:prop="item.prop"
:sortable="item.sortable"
:show-overflow-tooltip="true"
:fixed="item.fixed"
align="center"
>
<template slot-scope="scope">
<!-- 公告类型 -->
<span v-if="item.prop == 'noticeType'">
{{ typeFormat(scope.row) }}
</span>
<!-- 状态 -->
<span v-else-if="item.prop == 'status'">
{{ statusFormat(scope.row) }}
</span>
<!-- 创建时间 -->
<span v-else-if="item.prop == 'createTime'">
{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}
</span>
<span v-else>{{ scope.row[item.prop] }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:notice:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:notice:remove']"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改公告对话框 -->
<el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="公告标题" prop="noticeTitle">
<el-input
v-model="form.noticeTitle"
placeholder="请输入公告标题"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="公告类型" prop="noticeType">
<el-select v-model="form.noticeType" placeholder="请选择">
<el-option
v-for="dict in typeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictValue"
>{{ dict.dictLabel }}</el-radio
>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="内容">
<editor v-model="form.noticeContent" :min-height="192" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 表格相关设置弹框 -->
<GtableSetting
:columnList.sync="columnList"
:noColumnList.sync="noColumnList"
:visible.sync="dialogVisible"
@submitPopupData="submitPopupData"
>
</GtableSetting>
</div>
</template>
<script>
import {
listNotice,
getNotice,
delNotice,
addNotice,
updateNotice,
exportNotice,
} from "@/api/system/notice";
import Editor from "@/components/Editor";
import GtableSetting from "@/components/GtableSetting";
export default {
name: "Notice",
components: {
Editor,
GtableSetting,
},
data() {
return {
dialogVisible: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 公告表格数据
noticeList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 类型数据字典
statusOptions: [],
// 状态数据字典
typeOptions: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
noticeTitle: undefined,
createBy: undefined,
status: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
noticeTitle: [
{ required: true, message: "公告标题不能为空", trigger: "blur" },
],
noticeType: [
{ required: true, message: "公告类型不能为空", trigger: "change" },
],
},
columnList: [
{
label: "公告标题",
prop: "noticeTitle",
sortable: false,
fixed: null,
},
{
label: "公告类型",
prop: "noticeType",
sortable: false,
fixed: null,
},
{ label: "状态", prop: "status", sortable: false, fixed: null },
{ label: "创建者", prop: "createBy", sortable: false, fixed: null },
{
label: "创建时间",
prop: "createTime",
sortable: true,
fixed: null,
},
],
noColumnList: [
{
label: "更新时间",
prop: "updateTime",
sortable: true,
fixed: null,
},
{ label: "更新者", prop: "updateBy", sortable: false, fixed: null },
{ label: "公告id", prop: "noticeId", sortable: false, fixed: null },
],
};
},
created() {
this.getList();
this.getDicts("sys_notice_status").then((response) => {
this.statusOptions = response.data;
});
this.getDicts("sys_notice_type").then((response) => {
this.typeOptions = response.data;
});
},
methods: {
submitPopupData(val1, val2) {
this.columnList = JSON.parse(JSON.stringify(val1));
this.noColumnList = JSON.parse(JSON.stringify(val2));
this.dialogVisible = false;
},
// 打开表格相关设置弹框
tableSetup() {
this.dialogVisible = true;
},
/** 查询公告列表 */
getList() {
this.loading = true;
listNotice(this.queryParams).then((response) => {
this.noticeList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 公告状态字典翻译
statusFormat(row, column) {
return this.selectDictLabel(this.statusOptions, row.status);
},
// 公告状态字典翻译
typeFormat(row, column) {
return this.selectDictLabel(this.typeOptions, row.noticeType);
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
noticeId: undefined,
noticeTitle: undefined,
noticeType: undefined,
noticeContent: undefined,
status: "0",
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.noticeId);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加公告";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const noticeId = row.noticeId || this.ids;
getNotice(noticeId).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改公告";
});
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.noticeId != undefined) {
updateNotice(this.form).then((response) => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addNotice(this.form).then((response) => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const noticeIds = row.noticeId || this.ids;
this.$confirm(
'是否确认删除公告编号为"' + noticeIds + '"的数据项?',
"警告",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(function () {
return delNotice(noticeIds);
})
.then(() => {
this.getList();
this.msgSuccess("删除成功");
});
},
},
};
</script>
<style scoped lang="scss">
.dialogBox {
width: 100%;
overflow: hidden;
.dialogHead {
width: 100%;
overflow: hidden;
line-height: 30px;
margin-bottom: 10px;
}
}
.dialogCont {
width: 100%;
overflow: hidden;
p.dcP {
width: 100%;
overflow: hidden;
height: 32px;
line-height: 32px;
background: #ececec;
padding: 0px 10px;
box-sizing: border-box;
margin-bottom: 20px;
}
.dcUl {
width: 100%;
overflow: hidden;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
padding: 0;
li {
display: inline-block;
border: solid 1px #1890ff;
margin-right: 10px;
color: #1890ff;
font-size: 14px;
cursor: pointer;
margin-bottom: 10px;
width: 100px;
height: 34px;
line-height: 34px;
text-align: center;
overflow: hidden;
position: relative;
}
li.dcUlLi {
color: #606266;
border-color: #606266;
}
/* 写好遮罩层样式,并且让它先不显示 */
span.cover {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
position: absolute;
color: #fff;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0%;
}
/* 鼠标hover,显示遮罩,设置过渡时间 */
.cover:hover {
transition: all 1s;
width: 100%;
height: 100%;
opacity: 1;
}
}
}
.pageCom {
margin: 10px 0;
display: flex;
justify-content: center;
-webkit-justify-content: center;
}
</style>
表格设置(组件代码),导入了vuedraggable,可以使用拖拽排序
<template>
<div>
<el-dialog
title="表格相关设置"
:visible.sync="visible"
width="40%"
:before-close="closeTabelSet"
>
<div class="dialogBox">
<div class="dialogHead">
锁定前 <el-input
style="display: inline-block; width: 80px"
v-model="lineColum"
></el-input
> 列
</div>
<div class="dialogCont">
<p class="dcP">
已选择字段(可以拖动排序)(已选择{{ columnListOperate.length }}/{{
columnListOperate.length + noColumnListOperate.length
}}字段)
</p>
<ul class="dcUl">
<draggable
v-model="columnListOperate"
group="people"
@change="change"
@start="start"
@end="end"
>
<li v-for="(item, index) in columnListOperate" :key="index">
{{ item.label }}
<i class="el-icon-close" @click="delCol(item)"></i>
</li>
</draggable>
</ul>
</div>
<div class="dialogCont">
<p class="dcP">未选字段</p>
<ul class="dcUl">
<li
v-for="(item, index) in noColumnListOperate"
:key="index"
class="dcUlLi"
>
{{ item.label }}
<span class="cover" @click="addColumn(item)"
><i class="el-icon-plus"></i> 添加</span
>
</li>
</ul>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="closeTabelSet">取 消</el-button>
<el-button type="primary" @click="sureTableSet">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
props: {
columnList: {
type: Array,
required: true,
},
noColumnList: {
type: Array,
required: true,
},
visible: {
type: Boolean,
default: false,
},
},
data() {
return {
columnListOperate: [],
noColumnListOperate: [],
lineColum: "",
};
},
components: {
draggable,
},
created() {
this.columnListOperate = JSON.parse(JSON.stringify(this.columnList));
this.noColumnListOperate = JSON.parse(JSON.stringify(this.noColumnList));
},
methods: {
// 监听拖拽
change(event) {
console.log(event);
},
// 开始拖拽
start(event) {
console.log(event);
},
// 结束拖拽
end(event) {
console.log(event);
},
// 取消设置表格
closeTabelSet() {
this.lineColum = "";
this.columnListOperate = JSON.parse(JSON.stringify(this.columnList));
this.noColumnListOperate = JSON.parse(JSON.stringify(this.noColumnList));
this.$emit("update:visible", false);
},
// 删除已选字段item
delCol(row) {
this.columnListOperate.splice(
this.columnListOperate.findIndex((item) => item.label === row.label),
1
);
this.noColumnListOperate.push(row);
},
// 添加已选字段item
addColumn(row) {
this.noColumnListOperate.splice(
this.noColumnListOperate.findIndex((item) => item.label === row.label),
1
);
this.columnListOperate.push(row);
},
// 确定设置
sureTableSet() {
// 锁定前几列
for (let i = 0; i < this.columnListOperate.length; i++) {
if (i < this.lineColum) {
this.columnListOperate[i].fixed = true;
}
}
this.$emit(
"submitPopupData",
this.columnListOperate,
this.noColumnListOperate
);
},
},
};
</script>
<style scoped lang="scss">
.dialogBox {
width: 100%;
overflow: hidden;
.dialogHead {
width: 100%;
overflow: hidden;
line-height: 30px;
margin-bottom: 10px;
}
}
.dialogCont {
width: 100%;
overflow: hidden;
p.dcP {
width: 100%;
overflow: hidden;
height: 32px;
line-height: 32px;
background: #ececec;
padding: 0px 10px;
box-sizing: border-box;
margin-bottom: 20px;
}
.dcUl {
width: 100%;
overflow: hidden;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
padding: 0;
li {
display: inline-block;
border: solid 1px #1890ff;
margin-right: 10px;
color: #1890ff;
font-size: 14px;
cursor: pointer;
margin-bottom: 10px;
width: 100px;
height: 34px;
line-height: 34px;
text-align: center;
overflow: hidden;
position: relative;
}
li.dcUlLi {
color: #606266;
border-color: #606266;
}
/* 写好遮罩层样式,并且让它先不显示 */
span.cover {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
position: absolute;
color: #fff;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0%;
}
/* 鼠标hover,显示遮罩,设置过渡时间 */
.cover:hover {
transition: all 1s;
width: 100%;
height: 100%;
opacity: 1;
}
}
}
</style>