前端页面简单技巧

1、编辑数据修改没有保存关闭再打开数据为修改数据不是原数据  

解决：直接赋值错误  应该数据深拷贝之后再赋值

 let deepcopy=JSON.parse(JSON.stringify(row));

2、页面搜索条件要是很多 需要重置时可用循环置空

 for (const itemNum in this.listQuery) {
          if (itemNum !== 'page' && itemNum !== 'size') {
            this.listQuery[itemNum] = null
          }
        }

错误示范：

 

3.搜索条件限制通配符转义符

public class SqlUtils {

    private SqlUtils() {
    }

    private static final Logger logger = LoggerFactory.getLogger(SqlUtils.class);

    /**
     * MySQL需要转义的字段：\ % _
     */
    public static final Pattern PATTERN_MYSQL_ESCAPE_CHARS = Pattern.compile("(['_%\\\\]{1})");

    /**
     * 在SQL进行like时使用 ，mysql like时，参数使用传值 SqlUtils.convertToSQLSafeValue(String)； 禁止与escape 同时使用。
     *
     * 转义mysql的特殊字符 包括 '\', '%', '_', ''',
     * @param str
     * @return 返回可能为null eg:
     *  1'2_3%4\ 5 ?\ 转义后  1\'2\_3\%4\\\\ 5 ?\\\\
     *  null >> null
     *  """ >> ""
     *  "%" >> "\%"
     *  "\" >> "\\\\\"
     *  "_" >> "\_"
     *  "_%" >> "\_\%"
     */
    public static String convertToSQLSafeValue(String str) {
        if (str == null) {
            return null;
        }
        Matcher matcher = PATTERN_MYSQL_ESCAPE_CHARS.matcher(str);
        int charSplitStart = 0;
        if (!matcher.find()) {
            return str.trim();
        }
        StringBuilder sb = new StringBuilder();
        matcher.reset();
        String ch = "";
        while (matcher.find()) {
            ch = str.substring(matcher.start(), matcher.end());
            sb.append(str, charSplitStart, matcher.start())
                    .append('\\').append("\\".equals(ch) ? "\\\\\\" : ch);
            charSplitStart = matcher.end();
        }
        if (sb.length() == 0) return str;
        sb.append(str.substring(str.lastIndexOf(ch)+1));
        String result = sb.toString().trim();
        return result;
    }

}

4页面切换时，数据刷新

 

//Vue生命周期中的被激活时动作 
activated(){
      this.dwkey += 1
      this.dwkey1 += 1
      this.jskey += 1
    this.$refs.selectRoleWin.getRoleList()
  }

5、使用事件监听器实现数据绑定

在 <el-autocomplete> 元素上，我添加了 @select事件监听器，用来捕获选择事件。在事件处理方法 handleSelect中，我传递了两个参数：$event 表示事件对象，和 scope表示该行的数据对象。可使用监听器实现双向绑定。