关于iview、bootstrap-vue、model、layui学习过程中的一些总结

最新推荐文章于 2024-04-24 15:22:20 发布

Miss.lang

最新推荐文章于 2024-04-24 15:22:20 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习笔记

本文链接：https://blog.youkuaiyun.com/weixin_42118466/article/details/87800947

前端学习笔记专栏收录该内容

31 篇文章

订阅专栏

本文总结了在使用iview、bootstrap-vue和layui框架时的经验，包括HTML文件头部声明，iview中表格状态码翻译、时间格式转换，bootstrap-vue的空数据提示和输入限制，以及layui的日期处理、页面跳转和取消input提示文字等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:文件的声明头

iview

1、iview表格里面对后台返回的状态码进行翻译

两个状态码翻译

多个状态码翻译

2、转换时间格式

在data（）{return{selfFormat: this.format || "YYYY/MM/DD hh:mm:ss",}}

也可以写成selfFormat: this.format || "YYYY-MM-DD hh:mm:ss",看后台要求传什么的格式的

this.beginTime = moment(this.beginTime).format(this.selfFormat);

3、状态按钮的处理

4、 5、 6、 7、 8、 9、

bootstrap-vue

1、表格里面后台没有数据的时候，表格可以加这两个属性提示：

show-empty empty-text="暂无数据"

2、bootstrap表格里面，th里面的内容分行，在需要换行的地方加入</br>

3、根据后台返回的数据前端处理，保留两个小数点

4、输入的数值判断，后面输入的数值不能小于前面输入的数值，可以在输入的input框那里加上maxlength='3'，限制输入的字数。

5、翻译状态码可以用这个方法

6、表格里面加按钮，翻译，等等

7、 8、 9、 10、

弹框modal

1、限制输入类型

2、弹框的删除提示

3、layui框架学习

3.1日期的处理,开始时间和截止时间作为搜索条件时

HTML：<div class="layui-input-inline" style="width: 140px;">
                               <input class="layui-input" placeholder="开始日期" id="StartData">
                           </div>
                           <div class="layui-input-inline" style="width: 140px;">
                               <input class="layui-input" placeholder="截止日期" id="EndData">
                           </div>

JS：

var nowDates = WF.GetNowDate();

//设置开始时间
       var StartData = laydate.render({
               elem: '#StartData',
               theme: 'molv',//墨绿主题
               done: function (value, date){
                   if (value !== '') {
                       EndData.config.min.year = date.year;
   EndData.config.min.month = date.month - 1;
    EndData.config.min.date = date.date;
                   } else {
                       EndData.config.min.year = "";
   EndData.config.min.month = "";
    EndData.config.min.date = "";
                   }
               }
           });
           var EndData = laydate.render({
               elem: '#EndData',
               theme: 'molv',//墨绿主题
               done: function (value, date){
                   if (value !== '') {
                       StartData.config.max.year = date.year;
   StartData.config.max.month = date.month - 1;
    StartData.config.max.date = date.date;
                   } else {
                       StartData.config.max.year = "";
   StartData.config.max.month = "";
    StartData.config.max.date = "";
                   }
               }
           });

3.2 点击按钮跳转新的界面，不用a标签，且要传参数。

页面一：

页面二：

queryCode = GetQueryString("queryCode");
       function GetQueryString(name)   {
           var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
           var r = window.location.search.substr(1).match(reg);
           if(r != null) return  unescape(r[2]);
           return null;
       }

3.3 后台返回的是字符串，要提取出参数，在url上传参。

跳转的界面：

HTML：

JS：

var str = GetQueryString("str");
//中文传过来的参数是乱码，格式化乱码
str = decodeURI(str);

// 点击li时触发input[type=radio]这个事件
               $('.liClick').click(function() {
                   var $radio = $(this).find("input[type=radio]"),
                       $flag = $radio.is(":checked");
                   if(!$flag) {
                       $radio.prop("checked", true);
                   }
               });

(ps:弹框页面里面要跳转到其他的界面，parent.window.location.href="")

3.4 取消input的提示文字选项。