前端VUE3,JQ,uniapp,综合(Ctrl+F搜索)

微信小程序不能显示base64图片 

#base64图片数据
let rs = base64Data.replace(/[\r\n]/g,"")
<img src=rs />就能正常显示了

对象解构赋值


let res = await req(url,data)
console.log(res)

用res.xxx 访问属性
    "fz": "172.17.0.2",
    "env": "local",
    "code": 200,
    "msg": "操作成功",
    "data": {}

直接要哪个解构哪个


const {msg,code} = await req('xxx',data)
console.log(msg,code)

uniapp模板中调用import的方法


#util.js
export function  test(){
    console.log('ttttttttt')
//其他方法定义
......

引入方法后 ,js代码中可以正常调用 ,想在模板中直接调用引入的方法

需要在methods区域声明,才能直接在模板中调用


#index.vue
<button @click="test()">测试</button>
import {test} from '@/utils/util.js'
export default {
  data(){}
  methods:{
    test,
    loadData(){
      .......//其他方法定义

JS深度拷贝


    let a = {
      'name':'张三',
      'age':10
    let b = a //直接赋值 导致a b 指向同一内存地址 
    console.log(a,b)
    b.name = '李四'
    console.log(a,b)
  @change="handleCheckAll($event)" 
  :indeterminate="isIndeterminate"
  :disabled="checkAllDisabled"
>全选</el-checkbox>
<tr v-for="item in orderList">
    <el-checkbox 
      :disabled="item.disabled" 
      v-model="item.checked" 
      @change="handleCheckSingle($event,item)"
      >单选</el-checkbox>
<script>
methods:{
             * 处理单个勾选按钮
             * @param e true || false
             * @param item
             * @returns {Promise<void>}
            async handleCheckSingle(e,item){
                let that = this
                item.checked = e === true;
                that.handleCheckAllStyle()
             * 处理全部勾选按钮 ,当el-checkbox部分勾选时, 再次点击全选 ,e === true
             * @param e true||false
             * @returns {Promise<void>}
            async handleCheckAll(e){
                let that = this
                that.orderList.forEach(item=>{
                    //如果勾选禁用 ,就跳过本行记录
                    if(item.disabled === false) {
                        item.checked = e === true
                that.handleCheckAllStyle()
             * 处理全选按钮的样式
             * @returns {Promise<void>}
            async handleCheckAllStyle(){
                let that = this
                let checkedCount = 0;//选定的条数
                let totalLen = 0;//总可勾选条数
                that.orderList.forEach(item=>{
                    if(item.disabled !== true){
                        totalLen++;
                //统计可勾选的已勾选条目
                that.orderList.forEach(item=>{
                    if(item.checked === true && item.disabled === false) checkedCount++;
                that.isIndeterminate = checkedCount > 0 && totalLen > checkedCount;//有勾选 但是能勾的没勾完
                if(totalLen === checkedCount){
                    if(totalLen > 0){
                        that.isCheckedAll = true;//能勾的已经全部勾选
                    }else{
                        that.isCheckedAll = false;//没有能勾选的
                        that.checkAllDisabled = true;//全选禁用
            //获取数据
            async getData(){
                let that = this
                that.orderList = []
                res.data.orderList.list.forEach(item=>{
                    item.checked = false
                    item.disabled = parseFloat(item.payable_amount).toFixed(2) === '0.00';//禁选
                    that.orderList.push(item)
                that.$nextTick(()=>{
                    that.handleCheckAllStyle()//初始化全选按钮的状态
</script>

el-checkbox 全选 table数据


都是单独的checkbox, 没有用到checkboxGroup

拿到接口数据后 ,首先foreach, 每一行加入一个checked字段 ,默认false 不勾选


<el-checkbox 
  v-model="isCheckedAll" 
  @change="handleCheckAll($event)" 
  :indeterminate="isIndeterminate"
>全选</el-checkbox>
<tr v-for="item in orderList">
    <el-checkbox 
      v-model="item.checked" 
      @change="handleCheckSingle($event,item)"
      >单选</el-checkbox>
<script>
    Vue.createApp({
        data() {
            return {
                orderList:[],
                isIndeterminate:false,
                isCheckedAll:false,
        mounted(){
            this.getData()
        methods:{
             * 处理单个勾选按钮
             * @param e
             * @param item
             * @returns {Promise<void>}
            async handleCheckSingle(e,item){
                let that = this
                item.checked = e === true;
                that.handleCheckAllStyle()
             * 处理全部勾选按钮
             * @param e
             * @returns {Promise<void>}
            async handleCheckAll(e){
                let that = this
                that.orderList.forEach(item=>{
                    item.checked = e === true
                that.handleCheckAllStyle()
             * 处理全选按钮的样式
             * @returns {Promise<void>}
            async handleCheckAllStyle(){
                let that = this
                let checkedCount = 0
                let len = that.orderList.length
                that.orderList.forEach(item=>{
                    if(item.checked === true) checkedCount++;
                that.isIndeterminate = len > checkedCount && checkedCount > 0
                that.isCheckedAll = len === checkedCount
             * 获取选定的id
             * @returns {Promise<*[]>}
            async getIdList(){
                let that = this
                let idList = []
                that.orderList.forEach(item=>{
                    if(item.checked === true) idList.push(item.id)
                return idList
            //获取数据,
            //拿到接口数据后 ,首先foreach, 每一行加入一个checked字段 ,默认false 不勾选
            async getData(){
                res.data.orderList.list.forEach(item=>{
                    item.checked = false
                    that.orderList.push(item)
                that.isIndeterminate = false
    }).use(ElementPlus).mount("#vueapp");
</script>

如 http://xxx.com?id=10 想获取id




    



    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
let id = getQueryString('id')
#id = 10

js input大于0的整数 正则


//是否 >0 整数
let reg = /^[1-9]*[1-9][0-9]*$/
if(reg.test(e.target.value)){是}else{错}

js上传blob图片


用户选定图片后 ,点击确认 ,首先js拿到blob图片资源 ,利用FileReader 转成base64类型 再上传


                let reader = new FileReader();
                reader.readAsDataURL(fileList[i]) //fileList[i] blob类型
                reader.onload = function (e){
                    ajax上传方法('接口地址',{
                        imgData:e.currentTarget.result; //e.currentTarget.result 是base64类型的图片

解决uniapp微信小程序菜单连点重复打开同一页面


#html部分
<button @click="toReg()">注册</button>
#js部分
data() {
    return {
        jumping:false,
methods:{
    toReg(){
        let that = this
        if(that.jumping){
            console.log('跳转中');return ;
        that.jumping = true;
        uni.navigateTo({
            url:'xxx',
            success:()=>{
                setTimeout(()=>{
                    that.jumping = false
                },500)

Input Number 数字输入框


小程序限制input只能输入数字


注意这种情况没用使用双向绑定v-model


<input placeholder="请输入验证码" @input="onMyInput" />   
<script>
export default {
        data() {
            return {
                code:'',
        methods: {
            onMyInput(e){
                let str = e.detail.value//获取input内的所有内容 [新值]
                console.log(str)
                let reg = /^[0-9]*$/;
                if(!reg.test(str)){
                    return this.code //验证不通过返回旧值
                this.code = str //验证通过 新值覆盖旧值
</script>

TypeScript 声明一个对象的属性(key)的类型和默认值


单个变量类型和默认值
let name : string = '张三'
let age : number = 20
let arr : Array<any> = [1,2,3,'a','b','c']
对象key的属性和默认值
let obj = {
  dataList:{
    type:Array<any>(),//类型
    default:[],//默认值
  showTotalAmount:{
    type:Boolean,
    default:true
  showTotalNum:{
    type:Boolean,
    default:false

VUE点击按钮跳转连接(打开新窗口)


window.open('http://aaa.com')

VUE项目发布后刷新报404


nginx配置文件中加入


location / {
    try_files $uri $uri/ /index.html;

防止页面按钮连点 ,导致表单重复提交


页面上很多按钮 点击按钮就会请求接口 ,防止按钮连点 ,导致重复提交


<button :disabled="state.loading">提交1</button>
<button :disabled="state.loading">提交2</button>
<button :disabled="state.loading">提交3</button>
const state = reactive({
  loading:Boolean(false),//页面加载状态
const a = async ()=>{
  state.loading = true //请求接口前修改为true 所有按钮禁用
  await req(url,data)
  state.loading = false //请求完成 为false 所有按钮可点击
const b = async ()=>{
  state.loading = true
  await req(url,data)
  state.loading = false

el-checkbox全选


普通的 el-checkbox 自己实现全选

注意 不是el-checkbox-group

页面上表格数据  ,每行数据前放一个el-checkbox  页面底部再有一个el-checkbox用来做全选


<div v-for="item in state.list" :key="item.id" class="prolistss">
  <el-checkbox v-model="item.is_checked" true-label="1" false-label="0" @change="handleCheckedCitiesChange" />
  <el-image :src="item.url"/>
<el-checkbox 
  v-model="checkAll" 
  :indeterminate="isIndeterminate" 
  @change="handleCheckAllChange" label="全选" size="large" />

  • 单行数据的勾选变化时 ,统计勾选的数量 ,来改变全选按钮的状态
    • 

    const handleCheckedCitiesChange = (value: string[]) => {
  let myLength = state.list.length //页面数据总共多少行
  var myCount = 0 //已选行数
  state.list.forEach((item:any)=>{
    if(item.is_checked == '1'){
      myCount++
  if(myCount == myLength){
    console.log('全选')
    isIndeterminate.value = false //取消全选按钮的 模糊状态
    checkAll.value =  true //全选按钮 选中
  }else{
    if( myCount > 0 ){
      console.log('部分选')
      isIndeterminate.value = true
    }else{// 
      console.log('全不选')
      isIndeterminate.value = false
      checkAll.value =  false

  • 全选按钮点击时 ,修改所有单行按钮的状态
    • 

    const handleCheckAllChange = (trueOrFalse: boolean) => {
  console.log('handleCheckAllChange',trueOrFalse)
  if(trueOrFalse){ //全选按钮 选中
    state.list.forEach((item:any)=>{
      item.is_checked = '1'
  }else{ //全选按钮 取消
    state.list.forEach((item:any)=>{
      item.is_checked = '0'
  isIndeterminate.value = false //取消模糊状态

    el-table多选批量设置
    

    数据行数多 ,客户想要批量设置
    
勾选后  改变其中一行  其他选定的行跟随改变
    
未勾选的行可以分别设置
    
      <el-table-column>
        <template #default={row}>
          <el-input-number v-model="row.apply_num_limit" @change="handleChange(row)" />
        </template>
      </el-table-column>
    </el-table>
<script lang="ts" setup>
const list= ref(Array<any>()) //本页面数据
const selectedIdList = ref(Array<any>()) //保存勾选的行ID
const handleSelectionChange = (val:any)=>{
  selectedIdList.value = [] //清空勾选的ID
  val.forEach((item:any) => { //记录勾选的ID
    selectedIdList.value.push(item.id)
const handleChange = (row:any) => {
  //批量设置
  if(selectedIdList.value.indexOf(row.id) != -1){//如果当前改变行是勾选状态
    list.value.forEach((item:any)=>{
      if(selectedIdList.value.indexOf(item.id) != -1){//页面数据中的其他行也是勾选状态
        item.apply_num_limit = parseInt(row.apply_num_limit) //赋值
</script>

    下拉菜单el-select
    

                    <el-select 
                  v-model="state.pub_flow_main_id" 
                  class="m-2" 
                  placeholder="成本中心" 
                  size="large"
                  :disabled="true" //禁用
                  filterable //筛选
                  @change="functionName"//变化事件 参数(val) 为<el-option> 中的:value="item.id"
                  clearable //可清空
                    <el-option
                      v-for="item in state.flowList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  </el-select>

    vue3 + ts 子组件更新props
    

    子组件可以直接修改父组件传进来的值
    
子组件定义事件名称update:事件名
    
const emits = defineEmits(['update:dataList','addCartEvent'])
//子组件定义属性
const props = defineProps({
  dataList:{
    type:Array,
    default:Array<any>(),
  showTotalAmount:{
    type:Boolean,
    default:true
  showTotalNum:{
    type:Boolean,
    default:false
 * 删除购物车物料
const toDel = (row:any = null)=>{
  ElMessageBox.confirm(
    '确定删除选定的物料?',
    '警告',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
  .then(()=>{
    props.dataList.forEach((item:any,idx:any) => {
      if(item.id == row.id){
        props.dataList.splice(idx,1)
    -- 触发事件  子组件触发  父组件数据也会跟着边
    emits('update:dataList',props.dataList)
  .catch(e=>{
    // console.log('取消删除')

    父组件调用子组件
    

            <checkList 
          v-model:dataList="父组件变量" 
          @update:dataList="handUpdateDataList"  -- 可有可无 
          @addCartEvent="addCart(state.multSelected)" -- 与本例子无关
        </checkList>

    vue3 + ts 定义多个props属性
    

    //子组件定义属性
    

    const props = defineProps({
  dataList:{
    type:Array<any>(),
    default:[],
  num:{
    type:Number,
    default:0

    vue3 + ts 定义多个computed
    

    const num = computed(()=>{
  let totalNum = 0
  props.dataList.forEach((item:any) => {
    totalNum += item.purchaseNum
  return totalNum
const amount = computed(()=>{
  let totalAmount = 0
  props.dataList.forEach((item:any) => {
    totalAmount += parseFloat(item.purchaseNum) * parseFloat(item.get_price.tax_price)
  return totalAmount

    VUE3 子组件watch props的值
    

    可以写多个watc ,
    
const mycontent = ref('')
const props = defineProps({
  content: {
    type: String,
    default() {
      return ''
watch(
  ()=>props.content,//由于被监听的变量类型问题  ,用这种写法 
  () => {
    mycontent.value = props.content  
watch(
  mycontent, 
  (val) => {
    emit('update:content', val)

    VUE3 使用pinia代替VUEX
    

    每个组件都维护着自己的数据 ,当多个组件共用一份数据的时候就需要使用pinia
    
比如头部有一个我的购物车 ,显示当前购物车内的商品
    
多个页面中可以向购物车加入商品 ,每次加入商品 头部的购物车都需要刷新
    

    import { defineStore } from "pinia";
import { req } from "../api/myapi";
export const useHeadCart = defineStore('headCart',{
    //这里放数据
    state(){
        return {
            cartLoading:false,
            myCart:[],
            myCartNum:0,
            myCartTotalAmount:0,
    //这里写方法
    actions:{
        //刷新购物车
        async flushHeadCart() {
            console.log('pinia -> flushHeadCart');
            this.cartLoading = true
            let res = await req("eshopIndexHeadGetMyCart",{})
            this.myCart = res.data.myCart
            this.myCartNum = res.data.myCartNum
            this.myCartTotalAmount = res.data.myCartTotalAmount
            this.cartLoading = false

  • 读取数据 修改数据
    • 

    import { useHeadCart } from "../piniaStore/headCart";
const headCart = useHeadCart()
//调用方法
headCart.flushHeadCart()
//读取数据
<span class="sale-car-bage">{{headCart.myCartNum}}</span>

    VUE3 获取路由参数
    

    import { useRoute } from "vue-router";
const route = useRoute()
let id =  route.query.id

    JS转换UTC时间
    

    2022-06-08T13:06:40.000000Z 转成 YYYY-mm-dd H:i:s
    
 * UTC时间转换
 * @returns {string}
 * @param datetime UTC时间
 * @param dateSeprator 日期拼接符
 * @param timeSeprator 时间拼接符
 * @Eexample dateFormat("2021-09-03T22:42:05.659+00:00", "/", ":")
 *           dateFormat("2021-09-03T22:42:05.659+00:00")
 export function transTimestamp(datetime, dateSeprator = '-', timeSeprator = ':') {
  if (datetime) {
    const date = new Date(datetime)
    const year = `${date.getUTCFullYear()}`
    let month = `${date.getUTCMonth() + 1}`
    let day = `${date.getUTCDate()}`
    let hour = `${date.getUTCHours()}`
    let minute = `${date.getUTCMinutes()}`
    let second = `${date.getUTCSeconds()}`
    if (month.length === 1) {
      month = `0${month}`
    if (day.length === 1) {
      day = `0${day}`
    if (day.length === 1) {
      day = `0${day}`
    if (hour.length === 1) {
      hour = `0${hour}`
    if (minute.length === 1) {
      minute = `0${minute}`
    if (second.length === 1) {
      second = `0${second}`
    return `${year}${dateSeprator}${month}${dateSeprator}${day} ${hour}${timeSeprator}${minute}${timeSeprator}${second}`

    ref创建响应式变量 ,改变变量的值可以使用 xxx.value = xxx
    

    const checkAll = ref(false)
//方法中使用
const func = ()=>{
  checkAll.value = true

    elementui table 默认勾选
    

    elementui table中 type="selection"类型的勾选
    

    <el-table
      ref="multipleTableRef"
      :data="state.list"
      height="550"
      border
      style="width: 100%; font-size:12px"
      @selection-change="handleSelectionChange"
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column align="center" label="序号" width="70" >
</el-table>

    加载完数据后 ,要实现的效果
    
当请求接口后 ,根据某个字段 初始化勾选状态
    
接口数据赋值给页面后 ,在nextTick()中 使用 multipleTableRef.value.toggleRowSelection(item) 可以实现效果
    

      const multipleTableRef = ref()
  //接收数据
  const fetchData = async () => {
    state.listLoading = true
    let res = await req('adminMyCartList',state.queryForm)
    if(res.code == 200){
      state.list = res.data.cartList //接口返回数据
      //处理选中状态
      nextTick(() => {
        state.list.forEach((item:any) => {
          if(item.is_checked == 1){
            multipleTableRef.value.toggleRowSelection(item)

    element-ui-plus  时间选择 el-date-picker
    

                    <el-date-picker 
                  v-model="state.hope_delivery" 
                  :disabled-date="disabledDate" 
                  format="YYYY-MM-DD" 
                  value-format="YYYY-MM-DD" 
                  type="date" 
                  placeholder="选择期望交期" 

    设置禁用日期 ,组件内的每个日期都会挨个的传入 disabledDate方法 ,
    
方法返回true 日期被禁用 返回false 日期可用
    

    const disabledDate = (time: Date) => {
  let point = Date.now() + (3600 * 24 * 1000 * parseInt(state.statPrice.max_delivery_days_num))
  // time.getTime()是每天凌晨的时间戳 
  // 小于时间点point 就禁选
  return time.getTime() <= point

    state.statPrice.max_delivery_days_num = 3时的效果
    

    注意:这样写当用户点击取消  控制台会抛出一个错误 ,阻止程序toPass方法的console.log()继续执行,
    
点击确认 value就是输入的值,console.log()代码则会继续执行
    

    //偷懒的写法
const toPass = async (row:any)=>{
  const {value,action} = await ElMessageBox.prompt('请输入发票号', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  console.log(value)
//正常写法
ElMessageBox.prompt('Please input your e-mail', 'Tip', {
   confirmButtonText: 'OK',
   cancelButtonText: 'Cancel',
.then(({ value }) => {
   console.log(value)
.catch(() => {

    vue3父子组件传值 ,外部调用组件内部方法
    
父组件 -> 子组件 -> 孙子组件 , 想要在父组件某个事件中 ,调用孙子组件内部的方法
    
调用顺序也是 父组件(方法) -> 子组件(方法 )-> 孙子组件(方法)
    

    孙子组件headCart对外暴露方法 ,供子组件调用
    

    <script lang="ts" setup>
 * 组件自身刷新数据
const flushData = ()=>{
  console.log('flushData')
defineExpose({
  flushData
</script>

    子组件 引用孙子组件 headCart ,并且子组件也对外暴露方法 ,供父组件调用
    

    <template>
 <!-- 孙子组件 -->
  <HeadCart ref="headCartRef"></HeadCart>
<template>
<script lang="ts" setup>
  import HeadCart from "./headCart.vue" //引入孙子组件
  const headCartRef = ref() //拿到孙子组件的引用
  //子组件定义方法 调用孙子方法
  const flushHeadCart = ()=>{
    headCartRef.value.flushData()  
  //子组件对外暴露
  defineExpose({
    flushHeadCart
</script>

    父组件引入子组件
    

    <template>
 <Header ref="headerRef"></Header>
</template>
<script lang="ts" setup>
import Header from "/src/components/header.vue";
const headerRef = ref()
const addSingleCart = (item: any) => {
  item.num = 1
  req('eshopAddCart',{data:JSON.stringify([item])})
  .then(res=>{
    headerRef.value.flushHeadCart()
</script>

    vue点击按钮触发了后边的事件
    
const myToFixed = (val:any)=>{
  return (Math.round(parseFloat(val) * 100)/100).toFixed(2)

    <span style="font-size: 12px">¥</span>{{myToFixed(price)}}</span>

    微信小程序判断当前环境
    

    当前环境是指, 开发环境 ,体验环境 ,正式环境
    

    日常本地代码开发时 ,小程序所处的环境是开发环境
    
发布体验版小程序后 ,就成了体验环境
    
正式发布后 ,变成了正式环境
    
通常这三种环境下调用的后台接口地址是不同的
    
通过__wxConfig.envVersion获取当前环境 ,配置不同的接口地址
    
一般都写在一个单独的js配置文件里 Config.js
    

    #Config.js
//Api配置
const ApiConfig = {}
//['develop','trial','release']分别对应 开发版,体验版,正式版
console.log('当前微信小程序环境',__wxConfig.envVersion)
const env = __wxConfig.envVersion 
if(env == 'develop'){
    ApiConfig.apiurl = "http://localhost/api/"
    ApiConfig.weburl = "http://localhost/"
if(env == 'trial'){
    ApiConfig.apiurl = "http://mydevlop.com.cn/api/"
    ApiConfig.weburl = "http://mydevlop.com.cn/"
if(env == 'release'){
    ApiConfig.apiurl = "https://prod.com/api/"
    ApiConfig.weburl = "https://prod.com/"

    VUE2 父子组件传值
    

    用elementui dialog做为子组件
    

  • 父组件传递visible控制子组件是否显示
    • 

  • 子组件通过props接收visible , 但是子组件内部不能直接修改父组件传过来的值.
    
所以在子组件内部定义一个本地变量 myVisible 用来保存 props接收的值
    
并且通过watch方法监听接收的值, 去更新内部myVisible 变量
    • 

  • 子组件关闭需要通知父组件, 所以dialog的close方法需上报数据@close="$emit('dialogClose')"父组件接收并更新visible的值
    • 
<ChangePassword v-bind:visible="visible" @dialogClose="visible=false"></ChangePassword>
data: function () {
    return {
      visible: false
<template>
  <el-dialog title="修改密码" :visible.sync="myVisible" @close="dialogClose" :append-to-body="true">
    <el-form :model="form">
      <el-form-item label="新密码" :label-width="formLabelWidth">
        <el-input v-model="form.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码确认" :label-width="formLabelWidth">
        <el-input v-model="form.rePassword" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="myVisible = false">取 消</el-button>
      <el-button type="primary" @click="myVisible = false">确 定</el-button>
  </el-dialog>
</template>
<script>
const axios = require('axios')
export default {
  name: 'ChangePassword',
  data () {
    return {
      form: {
        password: '',
        rePassword: ''
      formLabelWidth: '120px',
      myVisible: false
  props: ['visible'],
  watch: {
    visible: function (newV, oldV) {
      this.myVisible = newV
</script>

    接口返回的数据进行排序,
    

    let arr = [
{'id':'1','name':'aaa','price':'1.0','getInfo':{'spec':'1'}},
{'id':'1','name':'aaa','price':'20.0','getInfo':{'spec':'2'}},
{'id':'1','name':'aaa','price':'9999.9','getInfo':{'spec':'3'}},
arr.sort(sortBy('id',true))//按照id正序
arr.sort(sortBy('id',false))//按照id倒序
arr.sort(sortBy('getInfo.spec',false))//按照`getInfo.spec`倒序

    const sortBy = (attr:any,rev:any)=>{
  //第二个参数为true or false 若没有传递 默认升序排列
  if(rev ==  undefined){
      rev = 1;
  }else{
      rev = (rev) ? 1 : -1;
  return function(a,b){ 
      let arr = attr.split('.')
      if(arr.length > 1){
        a = a[arr[0]][arr[1]];
        b = b[arr[0]][arr[1]];
      else{
        a = a[attr];
        b = b[attr];
//注意转成整数型
      a = parseInt(a)
      b = parseInt(b)
      if(a < b){
          return rev * -1;
      if(a > b){
          return rev * 1;
      return 0;

    datepicker
    

    禁选今天之前的日期 ,今天和往后可以选择
    

    <el-date-picker v-model="state.hope_delivery" :disabled-date="disabledDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="选择期望交期" />
const disabledDate = (time: Date) => {
  //返回true的日期会被禁用
  return time.getTime() <= (Date.now() -  (3600 * 24 * 1000))

    JQ获取name相同的radio被选中的值：
    

    $(':radio[name="choose_type"]:checked').val();

    JQ逗号切割字符串 ,逗号拼接数组
    

        exportIdList = "1,2,3,4"
    // exportIdList = "1"
    let arr = exportIdList.split(',')
    console.log(arr)
    let str = arr.join(',')
    console.log(str)
function checkOne(that) {
    let val = that.value //值
    let exportIdList = $('#exportIdList').val() //隐藏input
    let isChecked = that.checked
    if (isChecked == true){
        let arr = []
        if (exportIdList != ""){
            arr = exportIdList.split(',')
        arr.push(val)
        exportIdList = arr.join(',')
        console.log(exportIdList)
    else{
        let arr = exportIdList.split(',')
        arr.splice($.inArray(val,arr),1)
        exportIdList = arr.join(',')
        console.log(exportIdList)
    $('#exportIdList').val(exportIdList)

    jq勾选导出支持分页
    
隐藏input
    

    <input type="hidden" name="exportIdList" value="" id="exportIdList">
<th style="width: 30%" class="zjtextmiddle"  >
  <input type="checkbox" class="checkAll" id="checkAll" onclick="checkAll(this)" />

    <input type="checkbox" value="<%item.id%>" class="checkOne" onclick="checkOne(this)"/>
function checkOne(that) {
    let val = that.value //值
    let exportIdList = $('#exportIdList').val() //隐藏input
    let isChecked = that.checked//是否选定
    if (isChecked == true){
        let arr = []
        if (exportIdList != ""){
            arr = exportIdList.split(',')
        //id不存在就加入
        if (arr.indexOf(val) == -1){
            arr.push(val)
        exportIdList = arr.join(',')
    else{
        let arr = exportIdList.split(',')
        arr.splice($.inArray(val,arr),1)
        exportIdList = arr.join(',')
    $('#exportIdList').val(exportIdList)

    //本页全选
function checkAll(that) {
    let isChecked = that.checked //全选框是否选定
    let exportIdList = $('#exportIdList').val() //隐藏input
    //已经选定的id
    let finalArr = []
    if (exportIdList != ""){
        finalArr = exportIdList.split(',')
    //本页所有id
    let currArr = []
    $('.checkOne').each(function(key,item){
        currArr.push(item.value)
    //本页全选
    if (isChecked == true) {
        //全部选定
        $('.checkOne').each(function(key,item){
            $(item).prop('checked',true)
        currArr.forEach(function(item){
            if (finalArr.indexOf(item) == -1){
                finalArr.push(item)
        // finalArr = finalArr.concat(currArr) //合并
        exportIdList = finalArr.join(',') //拼接字符串
    }//本页全取消
    else{
        $('.checkOne').each(function(key,item){
            $(item).prop('checked',false) //全部取消选定
        //移除本页的id
        currArr.forEach(function(item){
            finalArr.splice($.inArray(item,finalArr),1)
        exportIdList = finalArr.join(',') //拼接字符串
    $('#exportIdList').val(exportIdList)

    #分页数据加载完执行
        handleCheckBox:function() {
            let isAllChecked = true
            let exportIdList = $('#exportIdList').val()
            let arr = []
            if (!exportIdList || exportIdList == ""){
                return
            arr = exportIdList.split(',') //已经选定的id数组
            //本页所有id
            $('.checkOne').each(function(key,item){
                let id = item.value
                if (arr.indexOf(id) > -1){
                    $(item).prop('checked',true)
                }else {
                    isAllChecked = false
            console.log('全部选定',isAllChecked)
            if (isAllChecked == true){
                $('#checkAll').prop('checked',true)

    jq通过that获取input的值
    

    <input type="checkbox" value="<%item.id%>" class="checkOne" onclick="checkOne(this)"/>

    function checkOne(that) {
    console.log(that)
    let val = that.value
    console.log(val)

    微信小程序判断当前环境
    
当前环境是指, 开发环境 ,体验环境 ,正式环境
    
日常本地代码开发时 ,小程序所处的环境是开发环境
    
发布体验版小程序后 ,就成了体验环境
    
正式发布后 ,变成了正式环境
    
通常这三种环境下调用的后台接口地址是不同的
    
通过__wxConfig.envVersion获取当前环境 ,配置不同的接口地址
    
一般都写在一个单独的js配置文件里 Config.js
    

    #Config.js
//Api配置
const ApiConfig = {}
//['develop','trial','release']分别对应 开发版,体验版,正式版
console.log('当前微信小程序环境',__wxConfig.envVersion)
const env = __wxConfig.envVersion 
if(env == 'develop'){
    ApiConfig.apiurl = "http://localhost/api/"
    ApiConfig.weburl = "http://localhost/"
if(env == 'trial'){
    ApiConfig.apiurl = "http://mydevlop.com.cn/api/"
    ApiConfig.weburl = "http://mydevlop.com.cn/"
if(env == 'release'){
    ApiConfig.apiurl = "https://prod.com/api/"
    ApiConfig.weburl = "https://prod.com/"

    JS给对象添加新的键值对
    

        let myKey = 'status'
    let value = 200
    let myData = {}
    myData[myKey] = value
    console.log(myData)