小决的专栏

ElementUI 实现文件上传下载

发表于 2021-05-17 分类于 Vue Valine：

通过 ElementUI 实现文件上传下载。

Vue 之 ElementUI 动态创建输入框

发表于 2021-05-13 分类于 Vue Valine：

动态添加属性

示例代码

<template>
    <div>
        <el-form :model="dataForm" label-width="100px">
            <el-form-item 
                v-for="(domain, index) in dataForm.domains"
                :label=domain.key
                :key="domain.key"
                :prop="'domains.' + index + '.value'"
                :rules="{ required: true, message: '属性不能为空', trigger: 'blur'}">
                <el-row>
                    <el-col :span="6">
                            <el-input v-model="domain.value"></el-input>
                    </el-col>
                    <el-col :span="4">
                            <el-button @click.prevent="removeDomain(domain)">删除</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('dataForm')">提交属性 </el-button>
                <el-button @click="addDomain">新增属性</el-button>
            </el-form-item>
        </el-form>
     </div>
</template>
<script>
  export default {
    data() {
      return {
        dataForm: {
          domains: [{
            key: '属性a',
            value: 'aaa'
          }, {
            key: '属性b',
            value: 'bbb'
          }]
        }
      }
    },
    methods: {
      removeDomain(item) {
        var index = this.dataForm.domains.indexOf(item)
        if (index !== -1) {
          this.dataForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.$prompt('请输入属性', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          this.dataForm.domains.push({
            value: '',
            key: value
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      }
    }
  }
</script>

实现效果

默认：

增加属性：

增加后：

删除：

动态添加输入框

示例代码

<template>
    <div>
        <el-form :model="dataForm" label-width="100px" size="small">
            <el-form-item label="名称匹配" prop="name">
              <el-row >
                <span v-for="(domain, index) in dataForm.domains">
                  <el-col :span="5">
                    <el-input v-model="domain.value"></el-input>
                  </el-col>
                  <el-col :span="2">
                    <el-button  @click="removeDomain(index)">删除</el-button>
                  </el-col>
                </span>
                <el-col :span="2">
                  <el-button  @click="addDomain">新增</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('dataForm')">提交属性 </el-button>
            </el-form-item>
        </el-form>
     </div>
</template>
<script>
  export default {
    data() {
      return {
        dataForm: {
          domains: [{value:"aaa"},{value:"bbb"},{value:"ccc"}]
        }
      }
    },
    methods: {
      removeDomain(index) {
        this.dataForm.domains.splice(index, 1)
      },
      addDomain() {
        this.dataForm.domains.push({value:""})
      }
    }
  }
</script>

实现效果

优化效果

通过 clearable @clear='' 来实现删除效果。

<template>
    <div>
        <el-form :model="dataForm" label-width="100px" size="small">
            <el-form-item label="名称匹配" prop="name">
              <el-row >
                <el-col :span="3" v-for="(domain, index) in dataForm.domains" >
                  <el-input v-model="domain.value" clearable @clear="removeDomain(index)"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-button  @click="addDomain">新增</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('dataForm')">提交属性 </el-button>
            </el-form-item>
        </el-form>
     </div>
</template>

Bootstrap Table 列宽拖动的方法

发表于 2021-05-12 分类于 HTML Valine：

Bootstrap

官方插件：https://bootstrap-table.com/docs/extensions/resizable/

方法一：colResizable

官网介绍：http://www.bacubacu.com/colresizable/
GitHub：https://github.com/alvaro-prieto/colResizable

引入依赖

<script type="text/javascript" src="http://www.bacubacu.com/colresizable/js/colResizable-1.6.min.js"></script>

示例代码

<html>
<title>colResizable</title>    
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.bacubacu.com/colresizable/js/colResizable-1.6.min.js"></script>
<script type="text/javascript"> 
    $(function(){
        $("#table").colResizable();
    })
</script>

</head>
<body>
  <table id="table" class="table table-bordered table-hover"> 
   <thead>
    <tr>
     <th style="width: 19.09%;" >ID</th>
     <th style="width: 33.56%;" >Item Name</th>
     <th style="width: 47.28%;" >Item Price</th>
    </tr>
   </thead> 
   <tbody>
    <tr data-index="0">
     <td>0</td>
     <td>Item 0</td>
     <td>$0</td>
    </tr>
    <tr data-index="1">
     <td>1</td>
     <td>Item 1</td>
     <td>$1</td>
    </tr>
    <tr data-index="2">
     <td>10</td>
     <td>Item 10</td>
     <td>$10</td>
    </tr>
   </tbody>
  </table> 
</body>

方法二：resizableColumns

GitHub：https://github.com/dobtco/jquery-resizable-columns
官方示例：http://dobtco.github.io/jquery-resizable-columns/

引入依赖

<script src="js/main/jquery.resizableColumns.min.js"></script>
<link rel="stylesheet" href="css/main/jquery.resizableColumns.css">

示例代码

<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://dobtco.github.io/jquery-resizable-columns/dist/jquery.resizableColumns.css">
<script src="http://dobtco.github.io/jquery-resizable-columns/dist/jquery.resizableColumns.min.js"></script>
<body>

 <table id="table" class="table table-bordered table-hover"> 
   <thead>
    <tr>
     <th style="width: 19.09%;" >ID</th>
     <th style="width: 33.56%;" >Item Name</th>
     <th style="width: 47.28%;" >Item Price</th>
    </tr>
   </thead> 
   <tbody>
    <tr data-index="0">
     <td>0</td>
     <td>Item 0</td>
     <td>$0</td>
    </tr>
    <tr data-index="1">
     <td>1</td>
     <td>Item 1</td>
     <td>$1</td>
    </tr>
    <tr data-index="2">
     <td>10</td>
     <td>Item 10</td>
     <td>$10</td>
    </tr>
   </tbody>
  </table> 
</body>
<script>
$(function(){
  $("#table").resizableColumns({
    store: window.store
  });
});
</script>

ElementUI 中的对列的值进行处理

发表于 2021-04-29 分类于 Vue Valine：

超链接

普通超链接

<el-table-column label="URL">
    <template slot-scope="scope">
        <el-link :href="scope.row.urlString" target="_blank" class="buttonText"  type="primary" :underline="false"> {{ scope.row.keyword }}</el-link>
    </template>
</el-table-column>

函数超链接

<el-link :href="toConfig(scope.row.name)" target="_blank" > {{ scope.row.name }}</el-link>

    toConfig(name){
      return "XXX?name="+name;
    },

类型翻译

使用 formatter

<el-table-column prop="anttype" label="类型" width="120" :formatter="anttypeFormat"></el-table-column>

以下函数无效：

anttypeFormat(row, column) {
    this.markerCategorys.forEach(t => {
      if(t.id == row.anttype){
        return t.name;
      }
    })
},

需要修改为：

anttypeFormat(row, column) {
    for (var i = 0; i < this.markerCategorys.length; i++) {
      if(this.markerCategorys[i].id == row.anttype){
        return this.markerCategorys[i].name;
      }
    }
},

这是由于 Vue 中的 forEach 循环无法终止程序 return 无效。需要改为用 for 循环即可。

使用过滤器

普通过滤器

<el-table-column label="日期" width="180">
    <template slot-scope="scope">
        <span>{{ scope.row.date | formatDate('HH:mm:ss') }}</span>
    </template>
</el-table-column>

定义函数

dateFormat(row,column){
  var date = row[column.property];
  if(date === undefined){
    return ''
  }
  var dT=new Date(date);//row 表示一行数据, dateTime 表示要格式化的字段名称
  return dT.getFullYear()+"-"+(dT.getMonth()+1)+"-"+dT.getDate()+" "+dT.getHours()+":"+dT.getMinutes()+":"+dT.getSeconds();
}

this 过滤器

Vue 局部过滤器获取不到 this，可以在 data 里面加个字段赋值 this，然后在过滤器里传入参数。

定义函数

export default {
  data() {
    return {
      that:this
    }
  },
  filters: {
    anttypeFormat(anttype,that) {
        for (var i = 0; i < that.markerCategorys.length; i++) {
          if(that.markerCategorys[i].id == anttype){
            return that.markerCategorys[i].name;
          }
        }
    }
  },
  methods: {}
}

所有过滤器

<el-table-column label="备注描述">
    <template slot-scope="scope">
        <div v-if="!scope.row.anttype==''">{{ scope.row.anttype | anttypeFormat(that) }}</div>
    </template>
</el-table-column>

状态 switch

Java 状态：

@TableField(exist = false)
private Boolean statusVO;

public Boolean getStatusVO() {
    return DisableStatusEnum.getStatusVO(getStatus());
}

其中：

public enum DisableStatusEnum {

    DISABLE(0),
    AVAILABLE(1);

    private int statusCode;

    DisableStatusEnum(int statusCode) {
        this.statusCode = statusCode;
    }

    public int getStatusCode() {
        return statusCode;
    }

    public void setStatusCode(int statusCode) {
        this.statusCode = statusCode;
    }

    public static Boolean getStatusVO(Integer status) {
        if (status!=null && status== AVAILABLE.getStatusCode()){
            return false;
        }
        return true;
    }

    public static int getStatus(Boolean status) {
        return status? DisableStatusEnum.DISABLE.getStatusCode() : DisableStatusEnum.AVAILABLE.getStatusCode();
    }
}

ElementUI

<el-table-column label="状态" width="80">
    <template slot-scope="scope">
        <el-switch v-model="scope.row.statusVO" @change="changStatus(scope.row)"></el-switch>
    </template>
</el-table-column>

Vue

//改变特征禁用状态
async changStatus(row) {
  const { data: res } = await this.$http.put(
    "updateStatus/" + row.id + "/" + row.statusVO
  );
  if (res.code !== 200) {
    this.$message.error("更新状态失败:" + res.msg);
    row.statusVO = !row.statusVO;
  } else {
    this.$message.success("更新状态成功");
  }
},

Java 接口

@PutMapping("/updateStatus/{id}/{status}")
public ResponseBean updateStatus(@PathVariable Integer id, @PathVariable Boolean status) {
    service.updateStatus(id, status);
    return ResponseBean.success();
}

Java 全排列递归算法

发表于 2021-04-23 分类于 Java ，算法 Valine：

无重复项的全排列

public List<List<Integer>> permute(int[] nums) {
    List<List<Integer>> lists = new ArrayList<>();
    permulation(lists, nums, 0);
    return lists;
}

public void permulation(List<List<Integer>> lists, int[] nums, int start) {
    if (start == nums.length) {     // 当n定位到最后一个数时，即到递归出口
        List<Integer> list = new ArrayList<>();
        for(int num:nums){
            list.add(num);
        }
        lists.add(list);
        return;
    }
    for (int i = start; i < nums.length; i++) {
        swap(nums, start, i);   // 交换位置
        permulation(lists, nums, start + 1);
        swap(nums, start, i);   // 恢复原来的顺序，进行下一次交换
    }
}

public void swap(int[] nums,int i,int j){
    int temp=nums[i];
    nums[i]=nums[j];
    nums[j]=temp;
}

有重复项的全排列

将这个问题看作有 n 个排列成一行的空格，我们需要从左往右依次填入题目给定的 n 个数，每个数只能使用一次。

那么很直接的可以想到一种穷举的算法，即从左往右每一个位置都依此尝试填入一个数，看能不能填完这 n 个空格，在程序中我们可以用「回溯法」来模拟这个过程。

public List<List<Integer>> permuteUnique(int[] nums) {
    List<List<Integer>> ans = new ArrayList<List<Integer>>();
    List<Integer> perm = new ArrayList<Integer>();
    boolean[] vis = new boolean[nums.length];
    Arrays.sort(nums);
    backtrack(nums, ans, vis, 0, perm);
    return ans;
}

public void backtrack(int[] nums, List<List<Integer>> ans, boolean[] vis, int idx, List<Integer> perm) {
    if (idx == nums.length) {
        ans.add(new ArrayList<Integer>(perm));
        return;
    }
    for (int i = 0; i < nums.length; ++i) {
        // 对原数组排序，保证相同的数字都相邻，然后每次填入的数一定是这个数所在重复数集合中「从左往右第一个未被填过的数字」，即如下的判断条件：
        if (vis[i] || (i > 0 && nums[i] == nums[i - 1] && !vis[i - 1])) {
            continue;
        }
        perm.add(nums[i]);
        vis[i] = true;
        backtrack(nums, ans, vis, idx + 1, perm);
        vis[i] = false;
        perm.remove(idx);
    }
}

Java 计算两个整数的最大公约数

发表于 2021-04-12 分类于 Java ，算法 Valine：

辗转相除法

辗转相除法，又名欧几里德算法（Euclidean algorithm），是求最大公约数的一种方法。它的具体做法是：用较大数除以较小数，再用出现的余数（第一余数）去除除数，再用出现的余数（第二余数）去除第一余数，如此反复，直到最后余数是 0 为止。

public int getVal(int a, int b) {
    int mid;
    while (b != 0) {
        mid = a % b;
        a = b;
        b = mid;
    }
    return a;
}

更相减损术

更相减损术是出自《九章算术》的一种求最大公约数的算法，它原本是为约分而设计的，但它适用于任何需要求最大公约数的场合。

原文是：

可半者半之，不可半者，副置分母、子之数，以少减多，更相减损，求其等也。以等数约之。

白话文译文：

（如果需要对分数进行约分，那么）可以折半的话，就折半（也就是用 2 来约分）。如果不可以折半的话，那么就比较分母和分子的大小，用大数减去小数，互相减来减去，一直到减数与差相等为止，用这个相等的数字来约分。

更相减损术原理：两个正整数 a 和 b（a>b），它们的最大公约数等于 a-b 的差值 c 和较小数 b 的最大公约数。

public int getGCD(int m, int n) {
    while (m != n) {
        if (m > n) {
            m -= n;
        } else {
            n -= m;
        }
    }
    return m;
}

动态添加属性

示例代码

实现效果

动态添加输入框

示例代码

实现效果

优化效果

Bootstrap

方法一：colResizable

引入依赖

示例代码

方法二：resizableColumns

引入依赖

示例代码

超链接

类型翻译

使用 formatter

使用 过滤器

普通过滤器

this 过滤器

状态 switch

无重复项的全排列

有重复项的全排列

辗转相除法

更相减损术

使用过滤器