23022312_vue字符串包含-优快云博客

<el-dropdown class="pulldown" @command="handleCommand">
          <span class="el-dropdown-link">
            下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <!-- <el-dropdown-item @click="update(item)">修改</el-dropdown-item> -->
            <el-dropdown-item :command="beforeHandleCommand('a',item)">修改</el-dropdown-item>
            <el-dropdown-item :command="beforeHandleCommand('b',item)">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

handleCommand (command) {
      switch (command.command) {
        case 'a':
          // 修改
          // console.log(command)
          this.update(command.row)
          break
        case 'b':
          // 删除
          this.remove(command.row.id)
          break
      }
    },
    beforeHandleCommand (item, row) {
      return {
        'command': item,
        'row': row
      }
    },

修改placeholder

::v-deep input::-webkit-input-placeholder{
	color:red;
	font-size:14px;
}
::v-deep input::-moz-placeholder{   /* Mozilla Firefox 19+ */
	color:red;
	font-size:14px;
}
::v-deep input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
	color:red;
	font-size:14px;
}
::v-deep input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
	color:red;
	font-size:14px;
}

el-table filters筛选调用后端接口筛选全部数据

<el-table :data="tableData"  @filter-change="filterHandler">
        <el-table-column align="header-center" prop="opType" label="操作类型" :filters=" {text: '新增', value: 1}, {text: '删除', value: 2}, {text: '修改', value: 3}, {text: '查询', value: 4}" column-key="opType">
          <template slot-scope="scope">
            {{ operateType(scope.row.opType) }}
          </template>
        </el-table-column>
</el-table>

switch case转换

methods: {
    // 操作类型转换(1: 新增 2:删除 3: 修改 4:查询)
    operateType (data) {
      switch (data) { 
        case 1:
          return '新增'
        case 2:
          return '删除'
        case 3:
          return '修改'
        case 4:
          return '查询'
      }
    },
    filterHandler (column) {
      this.searchvalue.opTypes = column.opType
      this.getData()  //调用查询接口
    },
}

el-table-column :filters 多条件后台筛选全部数据分页处理_多条件筛选数据后台ui_lMasterSparkl的博客-优快云博客1.问题描述最终效果如下将排序字段传入后台进行处理需要通过筛选条件不是排序筛选全部后台数据而不是当前页数据查找相关资料2.解决过程1.首先查找相关官方文档发现是筛选当前页这样只能前端进行分页及筛选才可以实现功能如果数据量大的情况下很麻烦2.查找相关博客资料主要参考参考资料2 博客链接 element ui table+分页筛选全部数据-demo3.最终代码vue页面中放上部分关键代码有些地方需要自行进行修改<el-table borderhttps://blog.youkuaiyun.com/lMasterSparkl/article/details/114875248

get 数组入参 request

import axios from 'axios'
import qs from 'qs'
paramsSerializer: params => {
      return qs.stringify(params, {
          indices: false
        })
    }

get请求传参数组_get请求数组参数_佚名的热心网友的博客-优快云博客假设现在有数组arr=[1,2]axios中如果直接使用数组传参，会出现参数中数组变成arr[]=1&arr[]=2的情况。实际上后端需要的是arr=1&arr=2的效果。这个时候可以使用axios里面的qs：导入：import qs from 'qs'使用：qs.stringify(params, { indices: false })注意一定要有{ indices: false }这个参数。作用就是消除[]这个下标可以使用paramsSerializer：axios({https://blog.youkuaiyun.com/weixin_45635130/article/details/124250518

post 对象数组入参formdata形式
滚轮为0,进入页面滚轮不为0,设置为0

updated () {
    document.body.scrollTop = 0
    window.pageYOffset = 0
    document.documentElement.scrollTop = 0
},

窗口的宽/高(可以判断窗口调节页面把内容大小/距离等/自适应)

document.body.clientWidth_给你取暖的博客-优快云博客https://zhongmeijun.blog.youkuaiyun.com/article/details/103054028https://blog.youkuaiyun.com/weixin_49409651/article/details/117802373

(窗口)margin自适应,消除最后一个div的margin(对于上一个的运用)

<div v-for="(item,index) in data" :key="index" :class="(index + 1) % cardNum == 0 ? 'clearMargin' : ''" :style="{'margin-right': cardmaright+'px'}">
</div>

data () {
    return {
       //div数量
      cardNum: 3,
       //div之间的距离
      cardmaright: null
    }
  },
mounted () {
    //里面的数字是用到的窗口宽度与剩余可利用的窗口宽度
    if ((document.body.clientWidth - 229) < 1152) {
      this.cardNum = 2
    } else if ((document.body.clientWidth - 229) >= 1152 && (document.body.clientWidth - 229) < 1536) {
      this.cardNum = 3
    } else if ((document.body.clientWidth - 229) > 1536) {
      this.cardNum = 4
    }
    this.cardmaright = ((document.body.clientWidth - 229) - (384 * this.cardNum)) / (this.cardNum - 1)
  },

点击按钮把页面调节到指定位置

methods: {
    regulateButton() {
      const targetElement = document.getElementById('target-element');
      targetElement.scrollIntoView({
        behavior: 'smooth' // 可选配置，控制是否平滑滚动
      });
    }
}

英文与数字过长不折行

overflow: hidden;
 white-space: normal;
 word-wrap: break-word;
 word-break: break-all;
 text-overflow: ellipsis;

内容过长显示省略号...

    width: 135px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;

加默认图片(当没有图片或图片失效时加默认图片)

<img :src="getImg(item)" class="imgStyle" @error="imgError">

// 加默认封面
    getImg (item) {
      if (item.imgUrl) return item.imgUrl
      return backgroundImg
    },
 // 图片链接失效/错误给默认图
    imgError (event) {
      const img = event.srcElement
      img.src = backgroundImg
      img.onerror = null // 防止闪图
    },

//css默认背景图,在图片链接失效没判断完成时可以显示css里添加的默认背景图
.imgStyle{
background:url(../../img/backgroundImg.jpg)
}

纯前端下载页面内容文件(不调用后端接口下载html文件)

<div id='download-content1'>1</div>
<div id='download-content2'>2</div>
<div id='download-content3'>3</div>

//前端下载文件-html(可以更改其他类型)
const content = document.querySelector('#download-content1').innerHTML + document.querySelector('#download-content2').innerHTML + document.querySelector('#download-content3').innerHTML

// 将内容转换为 Blob 对象
const blob = new Blob([content], { type: 'text/html;charset=utf-8' })

// 创建可下载的 URL
const url = URL.createObjectURL(blob)

// 创建下载链接并模拟点击下载
const link = document.createElement('a')
link.href = url
link.download = 'download.html'
link.click()

// 释放 URL 对象
URL.revokeObjectURL(url)

CSS渐变与阴影

渐变   background: linear-gradient(125deg, #eaf9fd, #f1e9fb);
阴影   box-shadow: 0px 1px 8px 2px rgba(0, 0, 0, 0.08);

截取字符串slice() substr() substring()

//截取点 .  后面的内容
this.viNameAppend = item.viName.substr(item.viName.lastIndexOf('.') + 1)

JS截取字符串（3种方法）String定义了 3个字符串截取的原型方法，说明如表所示。 String 类型的截取字符串方法字符串方法说明 slice() 抽取一个子串 substr() 抽取一个子串 substring() 返回字符串的一个子串截取指http://c.biancheng.net/view/5587.html

Vue判断字符串(或数组)中是否包含某个元素的多种方法

Vue判断字符串(或数组)中是否包含某个元素的多种方法_vue.js_脚本之家在我们前端日常开发中经常会遇到判断一个字符串中是否包含某个元素的需求,下面这篇文章主要给大家介绍了关于Vue判断字符串(或数组)中是否包含某个元素的多种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下https://www.jb51.net/article/261891.htm

el-table数据不更新问题

<el-table ref="table" :data="data" row-key="id" highlight-current-row @row-click="rowClick">
        <el-table-column :key="columnkey" type="index" width="50">
        </el-table-column>
</el-table>

data () {
    return {
      itemkey: 0,
    }
  },
methods: {
    rowClick(){
         this.columnkey++
    }
},

input框点击回车刷新页面问题

<el-input v-model="value" placeholder="请输入" onkeypress="if (event.keyCode == 13) return false" />

input框点击回车刷新页面问题_input回车刷新页面_雨后彩虹 :-) :'( ;-)的博客-优快云博客input框点击回车刷新页面问题https://blog.youkuaiyun.com/weixin_44055653/article/details/127976685

el-table表格使用dialog修改内容，表格也跟着修改问题(深拷贝)

this.value = JSON.parse(JSON.stringify(val))

vue中使用dialog内容修改，表格也跟着修改问题解决_vue弹窗修改数据_1212爸爸的博客-优快云博客vue中使用dialog内容修改，表格也跟着修改问题解决https://blog.youkuaiyun.com/weixin_44545895/article/details/125658833

el-table行内编辑

Vue el-table实现行内编辑_vue实现编辑_Song_Estelle的博客-优快云博客Vue el-table实现行内编辑https://blog.youkuaiyun.com/weixin_43484014/article/details/126465119

富文本tinymce

Nuxt 使用tinymce插件_nuxt3 tinymce_73一人的博客-优快云博客一、原因 tinymce插件是一个很好的编辑器，vue兼容使用也很方便，但是改nuxt框架后使用方式有点不同，网上大多数说的方法都是从module拷贝文件，然后自建component，可是这种方式太麻烦了，简单点其实也可以用，下面来介绍一下吧二、步骤 1、安装tinymce或者在package.json添加然后npm install进行安装 2、创建plugin在plugins文件夹下创建一个tinymce.js文件 3、引入plhttps://blog.youkuaiyun.com/u010940131/article/details/125688961

统一社会信用代码正则表达式

统一社会信用代码正则表达式_统一社会信用代码正则校验_弧度ing的博客-优快云博客统一社会信用代码正则表达式https://blog.youkuaiyun.com/qq_42200473/article/details/122427947

23022312

el-dropdown下拉组件中command方法添加额外参数的方法

修改placeholder

el-table filters筛选 调用后端接口筛选全部数据

get 数组入参 request

post 对象数组入参formdata形式

滚轮为0,进入页面滚轮不为0,设置为0

窗口的宽/高(可以判断窗口调节页面把内容大小/距离等/自适应)

(窗口)margin自适应,消除最后一个div的margin(对于上一个的运用)

点击按钮把页面调节到指定位置

英文与数字过长不折行

内容过长显示省略号...

加默认图片(当没有图片或图片失效时加默认图片)

纯前端下载页面内容文件(不调用后端接口下载html文件)

CSS渐变与阴影

截取字符串slice() substr() substring()

Vue判断字符串(或数组)中是否包含某个元素的多种方法

el-table数据不更新问题

input框点击回车刷新页面问题

el-table表格使用dialog修改内容，表格也跟着修改问题(深拷贝)

el-table行内编辑

富文本tinymce

统一社会信用代码正则表达式

el-table filters筛选调用后端接口筛选全部数据