搜索到
678
篇与
的结果
-
一个图片上传插件推荐，支持多图上传和删除操作 本插件可以实现图片上传和图片删除操作，同时也可以限制上传图片张数，供大家参考和使用。效果展示：引入js:<script type="text/javascript" src="https://www.tpxhm.com/fdetail/localResizeIMG.js"></script> <script type="text/javascript" src="https://www.tpxhm.com/fdetail/mobileBUGFix.mini.js"></script> html部分代码： <div class="release_up_pic"> <div class="up_pic"> <span id="chose_pic_btn" style=""> <input type="file" accept="image/*" name="file" /> </span> <p class="maxpicture"><b>图片</b><br>(最多四张)</p> </div> </div>js处理代码：<script> // 多图 var picArr = new Array();// 存储图片 var picArrAll = new Array(); $('input[name="file"]:file').localResizeIMG({ width:800,// 宽度 quality: 0.8, // 压缩参数 1 不压缩 越小清晰度越低 success: function (result) { $('.maxpicture').css('display','none') var img = new Image(); img.src = result.base64; var _str = "<span class='pic_look' style='background-image: url("+ img.src + ")'><em id='delete_pic'>×</em></span>" $('#chose_pic_btn').before(_str); var _i = picArr.length picArr[_i] = result.base64; // picArr[_i] = _i; if(picArr.length==4){ $('#chose_pic_btn').css('display','none') } // console.log(picArr) // console.log(picArrAll); } }); // 删除 $(document).on('click', '#delete_pic', function(event) { var aa = $(this).parents(".pic_look").index(); picArr.splice(aa,1); $(this).parents(".pic_look").remove(); // console.log(picArr); if(picArr.length<4){ $('#chose_pic_btn').css('display','block') } }); </script>css样式代码：/*多图*/ .release_up_pic .tit{padding: 12px; font-size: 1.4rem; color: #999;} .release_up_pic .tit h4{font-weight: normal;} .release_up_pic .tit h4 em{font-size: 1.1rem;} .release_up_pic .up_pic{background-color: #fff;} .release_up_pic .up_pic .pic_look{width: 3.92rem; height: 3.92rem; display: inline-block; background-size: cover; background-position: center center; background-repeat: no-repeat; box-sizing: border-box; position: relative; margin-left: 0.2rem; border:1px solid #e8e8e8;} .release_up_pic .up_pic .pic_look em{position: absolute; display: inline-block; width: 100%; height: 1.08rem; background-color: rgba(0,0,0,0.5); color: #fff; font-size: 18px; left: 0px; bottom: 0px; text-align: center; line-height: 1.08rem; font-weight: bold; font-style: normal;} #chose_pic_btn{width: 4.0rem; height: 4rem; margin-left: 0.2rem; position: relative; display: inline-block; background-image: url(images/addUpload.jpg); box-sizing: border-box; background-size: 100% 100%; background-position: center center; background-repeat: no-repeat;} #chose_pic_btn input{position: absolute; left: 0px; top: 0px; opacity: 0; width: 100%; height: 100%;} .release_btn{padding: 0 24px; margin-top: 70px;} .release_btn button{width: 100%; background-color: #2c87af; font-size: 1.4rem; color: #fff; border: none; border-radius: 3px; height: 45px; outline: none;} .release_btn button.none_btn{background-color: #f2f2f2; color: #2c87af; border: 1px solid #2c87af; margin-top: 15px;} .maxpicture{display: inline-block; font-size: 0.8rem; color: #999999; line-height: 1.2rem; text-align: center; padding-top: 0.6rem; margin-left: 0.6rem;} .maxpicture b{color: #333333; line-height: 1.2rem; font-weight: normal;}附件下载地址：阿里云盘链接：https://www.aliyundrive.com/s/FTmebryJ1AQ -
-
Thinkphp6实现Excel导入功能 tp6实现Excel导入很简单，实现步骤如下：1、使用composer安装PHPExcelcomposer require phpoffice/phpexcel2、执行composer更新composer update3、代码实现<?php declare (strict_types = 1); namespace app\union\controller; use app\Request; use app\union\model\Groups; use think\facade\Cookie; use think\facade\Db; use think\facade\View; use PHPExcel_IOFactory; //通过composer加载的第三方类，直接在头部引入一下就可以 class Group extends Base { public function import_save(Request $request){ if(!$request->param('excel')){ return returnJson('500','请上传excel文件'); } $path = public_path().$request->param('excel'); //实例化PHPExcel类 $PHPExcel = new \PHPExcel(); //默认用excel2007读取excel，若格式不对，则用之前的版本进行读取 $PHPReader = new \PHPExcel_Reader_Excel2007(); if (!$PHPReader->canRead($path)) { $PHPReader = new \PHPExcel_Reader_Excel5(); if (!$PHPReader->canRead($path)) { return returnJson('500','请上传excel文件'); } } //读取Excel文件 $PHPExcel = $PHPReader->load($path); //读取excel文件中的第一个工作表 $sheet = $PHPExcel->getSheet(0); //取得最大的列号 $allColumn = $sheet->getHighestColumn(); //取得最大的行号 $allRow = $sheet->getHighestRow(); //从第二行开始插入,第一行是列名 for ($currentRow = 2; $currentRow <= $allRow; $currentRow++) { //获取B列的值 $data = [ 'number'=>$PHPExcel->getActiveSheet()->getCell("A" . $currentRow)->getValue(), 'nickName'=>$PHPExcel->getActiveSheet()->getCell("B" . $currentRow)->getValue(), 'name'=>$PHPExcel->getActiveSheet()->getCell("C" . $currentRow)->getValue(), 'tel'=>$PHPExcel->getActiveSheet()->getCell("D" . $currentRow)->getValue(), 'money'=>$PHPExcel->getActiveSheet()->getCell("E" . $currentRow)->getValue(), 'time'=>self::get_date_by_excel($PHPExcel->getActiveSheet()->getCell("F" . $currentRow)->getValue()), 'is_pay'=>$PHPExcel->getActiveSheet()->getCell("G" . $currentRow)->getValue(), 'shop_name'=>$PHPExcel->getActiveSheet()->getCell("H" . $currentRow)->getValue(), 'remarks'=>$PHPExcel->getActiveSheet()->getCell("I" . $currentRow)->getValue(), 'status'=>0, 'created_at'=>date('Y-m-d') ]; if($data['number'] == ''){ $result = 1; continue; }else{ $find = Groups::where(array('number'=>$data['number']))->find(); if($find){ $result = 1; continue; }else{ $result=Db::name('group')->insert($data); } } } if($result){ return returnJson('200','导入成功'); }else{ return returnJson('500','导入失败'); } } public static function get_date_by_excel($date){ if (!$date || $date == '0000-00-00') return null; $unix_time = \PHPExcel_Shared_Date::ExcelToPHP($date); return gmdate('Y-m-d H:i',$unix_time); } } ?>
-
-
elementUI el-table 表格实现手动选择展示列 一、使用场景：在使用elementui开发表格功能的时候，我们会遇到表格字段列数过多的情况，这时我们就需要对其进行设置，选择是否展示列，默认展示多少列，还有就是到处表格数据的时候，我们可以指定选择列到处，这样体验方面是很好的。二、效果展示：点击操作按，展开筛选类选项三、实现思路：（1）表格默认展示所有字段，每个字段通过 v-if 属性来进行判断是否显示；（2）点击表格最后一列表头（操作栏），弹出选择框；【el-popover】（3）选择框中包括：全选复选框、所有字段复选框组、取消按钮、确定按钮；【el-checkbox-group】（4）选择字段值后，点击“确定”按钮：（5）更新每个字段值的show属性（true / false），选中当前表格所展示的字段；重新渲染表格；四、实现代码：实现分页，筛选效果，展示数据。1、前端代码<template> <div> <!-- 卡片视图区域 --> <el-card class="box-card"> <el-table :data="tableData" border stripe @selection-change="handleSelectionChange" class="table-container" v-loading="listLoading"> <el-table-column align="left" v-if="showColumn('id')" label="ID" prop="id" min-width="100" /> <el-table-column align="left" v-if="showColumn('name')" label="名称" prop="name" min-width="150" /> <el-table-column align="left" v-if="showColumn('money')" label="优惠金额" prop="money" min-width="150" /> <el-table-column align="left" v-if="showColumn('created_at')" label="添加时间" prop="created_at" min-width="150" /> <el-table-column align="left" v-if="showColumn('updated_at')" label="最近修改" prop="updated_at" min-width="180" /> <el-table-column align="center" label="操作" min-width="150" fixed="right"> <template slot="header" slot-scope="scope"> <el-popover width="200" popper-class="tablePopover" trigger="manual" ref="tablePopover" v-model="popoverVisible" @show="showPopover"> <span slot="reference" @click="openPopover">操作<i class="el-icon-arrow-down" style="font-weight: bold;" /></span> <div class="popoverCheckBoxArea"> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <div style="margin: 10px 0;"></div> <el-checkbox-group v-model="checkedColumns" @change="handleCheckedColumnsChange"> <el-checkbox v-for="column in columns" :label="column.value" :key="column.value">{{column.text}}</el-checkbox> </el-checkbox-group> </div> <div class="popoverCheckBoxButton"> <el-button size="mini" @click="canclePopover">取消</el-button> <el-button type="primary" size="mini" @click="confirmPopover">确定</el-button> </div> </el-popover> </template> <template slot-scope="scope"> <el-button type="primary" size="mini" @click="showEditDialog(scope.row.id)">编辑</el-button> <el-button type="danger" size="mini" @click="removeAdById(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> <!-- 分页区域 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[3,500,5000,10000,50000]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </el-card> </div> </template>2、js代码：<script> export default { data(){ return{ // data中定义的变量 listLoading: false, tableData: [], // 获取飞猪门票管理新列表的参数对象 queryInfo: { query: '', // 当前的页数 pagenum: 1, // 当前每页显示多少条数据 pagesize: 3 }, total: 0, // 选择展示的字段数组 columns: [ { text: 'ID', value: 'id', show: true }, { text: '名称', value: 'name', show: true }, { text: '优惠金额', value: 'money', show: true }, { text: '添加时间', value: 'created_at', show: true }, { text: '最近修改', value: 'updated_at', show: true }, ], popoverVisible: false, checkAll: true, checkedColumns: [], isIndeterminate: false, } }, created () { this.getFliggyList() }, methods: { async getFliggyList () { const { data: res } = await this.$http.get('shanrong_money/index', { params: this.queryInfo }) if (res.code != 200) { return this.$message.error(res.msg) } this.loading=false console.log( res.data.data) this.tableData = res.data.data this.total = res.data.total this.queryInfo.pagenum = res.data.current_page }, // 监听 pagesize 改变事件 handleSizeChange (newSize) { // console.log(newSize) this.queryInfo.pagesize = newSize this.getFliggyList() }, // 监听页面值改变的事件 handleCurrentChange (newPage) { // console.log(newPage) this.queryInfo.pagenum = newPage this.getFliggyList() }, // -------------------------- Popover相关方法 START ------------------------- // 点击“操作”打开菜单选择框 openPopover() { this.popoverVisible = true; // 去掉第二个popover弹框（修改问题：使用fixed固定列后popover会出现两个） this.$nextTick(() => { document.getElementsByClassName('tablePopover')[1].style.display = 'none'; }) }, // 弹出框打开时触发 showPopover() { // 选中目前已展示的字段值 this.checkedColumns = []; this.columns.map(item => { if(item.show) { this.checkedColumns.push(item.value); } }); // 如果目前展示的是全部字段，则需要勾选上“全选”按钮 if(this.columns.length == this.checkedColumns.length) { this.checkAll = true; this.isIndeterminate = false; } // 重新渲染表格 this.$nextTick(() => { this.$refs.multipleTable.doLayout(); }) }, // 点击弹出框的“全选”按钮 handleCheckAllChange(val) { let columnsValueList = []; this.columns.map(item => columnsValueList.push(item.value)); this.checkedColumns = val ? columnsValueList : []; this.isIndeterminate = false; }, // 点击弹出框的选择展示菜单的复选框 handleCheckedColumnsChange(value) { let checkedCount = value.length; this.checkAll = checkedCount === this.columns.length; this.isIndeterminate = checkedCount > 0 && checkedCount < this.columns.length; }, // 点击弹出框的“取消”按钮 canclePopover() { this.popoverVisible = false; // this.$refs.tablePopover.doClose(); }, // 点击弹出框的“确定”按钮 confirmPopover() { if(this.checkedColumns.length == 0) { this.$message({ message: '请选择需要展示的表格字段', center: true, customClass: 'message-error' }); return; } // 根据选择结果，遍历修改列是否展示的属性值 this.columns.forEach(item => { if(this.checkedColumns.some(el => el == item.value)) { item.show = true; } else { item.show = false; } }) this.popoverVisible = false; // this.$refs.tablePopover.doClose(); // 重新渲染表格 this.$nextTick(() => { this.$refs.multipleTable.doLayout(); }) }, // 表格列是否显示的方法 showColumn(currentColumn){ return this.columns.find(item => item.value == currentColumn).show; }, // -------------------------- Popover相关方法 END ------------------------- }, } </script> <style scoped> .popoverCheckBoxArea { padding: 10px 20px 0 20px; margin-bottom: 10px; max-height: 600px; overflow-y: auto; overflow-x: hidden; } .popoverCheckBoxButton { text-align: center; padding-bottom: 10px; } </style>
