el-table设置封装

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-inputv-model="queryParams.noticeTitle"placeholder="请输入公告标题"clearablesize="small"@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="操作人员" prop="createBy"><el-inputv-model="queryParams.createBy"placeholder="请输入操作人员"clearablesize="small"@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="类型" prop="noticeType"><el-selectv-model="queryParams.noticeType"placeholder="公告类型"clearablesize="small"><el-optionv-for="dict in typeOptions":key="dict.dictValue":label="dict.dictLabel":value="dict.dictValue"/></el-select></el-form-item><el-form-item><el-buttontype="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-buttontype="primary"plainicon="el-icon-plus"size="mini"@click="handleAdd"v-hasPermi="['system:notice:add']">新增</el-button></el-col><el-col :span="1.5"><el-buttontype="success"plainicon="el-icon-edit"size="mini":disabled="single"@click="handleUpdate"v-hasPermi="['system:notice:edit']">修改</el-button></el-col><el-col :span="1.5"><el-buttontype="danger"plainicon="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><iclass="el-icon-setting"style="color: #2e54ec;margin: 4px 0 0 12px;font-size: 20px;cursor: pointer;"@click="tableSetup"></i></el-col></el-row><el-tablev-loading="loading":data="noticeList"@selection-change="handleSelectionChange"style="width: 100%"><el-table-column type="selection" width="55" align="center" fixed /><el-table-columnlabel="序号"align="center"prop="noticeId"width="80"fixed/><el-table-columnv-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-columnlabel="操作"align="center"class-name="small-padding fixed-width"><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-edit"@click="handleUpdate(scope.row)"v-hasPermi="['system:notice:edit']">修改</el-button><el-buttonsize="mini"type="text"icon="el-icon-delete"@click="handleDelete(scope.row)"v-hasPermi="['system:notice:remove']">删除</el-button></template></el-table-column></el-table><paginationv-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-inputv-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-optionv-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-radiov-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-dialogtitle="表格相关设置":visible.sync="visible"width="40%":before-close="closeTabelSet"><div class="dialogBox"><div class="dialogHead">锁定前&nbsp;&nbsp;&nbsp;&nbsp;<el-inputstyle="display: inline-block; width: 80px"v-model="lineColum"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;列</div><div class="dialogCont"><p class="dcP">已选择字段（可以拖动排序）（已选择{{ columnListOperate.length }}/{{columnListOperate.length + noColumnListOperate.length}}字段）</p><ul class="dcUl"><draggablev-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"><liv-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);},// 删除已选字段itemdelCol(row) {this.columnListOperate.splice(this.columnListOperate.findIndex((item) => item.label === row.label),1);this.noColumnListOperate.push(row);},// 添加已选字段itemaddColumn(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>

el-table设置封装相关推荐

P15-Vue3后台管理系统-用户管理界面-table表格封装
P15-Vue3后台管理系统-用户管理界面-table表格封装 1.概述这篇文章继续介绍用户管理界面,在这篇文章中完成table表格封装 2.新建表格组件 2.1.新建CommonTable组件 2 ...
layui table 字体大小_layui table设置某一行的字体颜色方法
table自带的可以设置某一个单元格颜色,必须根据内容来修改,对于很多列同时修改并不方便,直接使用js操作比较简单. 首先自定义一个div,内部存放table,根据class找到table,然后找到行 ...
layui table 设置滚动条
table设置一下高度,就会自动出现滚动条: table.render({ elem: '#jqGrid' ,height: 420 <!DOCT ...
table 设置边框
本文引自:https://www.cnblogs.com/leona-d/p/6125896.html 示例代码: <!DOCTYPE html> <html lang=" ...
css table设置边框_table布局的一些总结
工作中遇到的自适应表格,实现过程并不顺畅,花费了一些功夫.将其中不熟悉的技术点总结如下,期待下次可以行云流水的做出来. 1.自适应表格如何实现文本溢出点点的效果自适应的表格,由于单元格的流动性,文字 ...
layui 行变灰_layui table设置某一行的字体颜色方法
table自带的可以设置某一个单元格颜色,必须根据内容来修改,对于很多列同时修改并不方便,直接使用js操作比较简单. 首先自定义一个div,内部存放table,根据class找到table,然后找到行 ...
layui table设置表格单元格换行，固定列高度改变
layui table设置表格单元格换行 css /** 控制表格单元格换行 **/ .layui-table-cell {height: auto;word-break: normal;displa ...
table 设置 td 标签宽高
table 设置 td 标签宽高在默认情况下,table 中的 td 不允许使用 css 来设定宽高,需要为 table 改变一些参数之后才可使用 CSS 来随心控制. <table bord ...
table设置colspan属性，列宽显示错位解决方法
table设置colspan属性,列宽显示错位解决方法参考文章: (1)table设置colspan属性,列宽显示错位解决方法 (2)https://www.cnblogs.com/xiaoxiao ...
设置elment ui plus 的el table的边框线
:**代码设置类名,给奇偶行设置类名 const tableRowClassName = ({ rowIndex }) => {if (rowIndex % 2 === 0) {return ...

el-table设置封装

el-table设置封装相关推荐

最新文章

热门文章