Code Monkey home page Code Monkey logo

nmxiaowei / avue Goto Github PK

View Code? Open in Web Editor NEW
2.2K 56.0 478.0 158.17 MB

Avue.js2.0是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,容易维护和扩展的框架,同时内置了丰富了数据展示组件,让开发变得更加容易

Home Page: https://avuejs.com

License: MIT License

JavaScript 24.04% Vue 65.43% Shell 0.02% SCSS 10.50%
avue vue crud form vue-cli element-ui web

avue's Introduction

Avue logo

介绍

Avue.js是基于现有的element-ui库进行的二次封装,从而简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,容易维护和扩展的框架,同时内置了丰富了数据展示组件,让开发变得更加容易.

浏览器兼容性

支持所有符合ES5标准的浏览器(不支持IE8及以下版本).

文件

文件名 用途
avue.min.js 生产环境
avue.js 开发环境

文档

要查看Live Examples和文档,请访问https://avuejs.com.

问答

有关问题和支持,请使用issues或加入QQ群606410437.

issues

打开问题之前,请务必提供详细的问题过程和截图,不符合准则的问题将会被拒绝.

Changelog

发行说明中记录了每个版本的详细更改。

License

MIT

Copyright (c) 2017-present, Smallwei

avue's People

Contributors

kakajun avatar linclin avatar lishangbu avatar nmxiaowei avatar noreasonup avatar pgfj18 avatar ruixs520 avatar smallweis avatar soullyoko avatar swustzl avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

avue's Issues

500 | Internal Server Error

...
vue-ssr-server-bundle.json  838 kB          [emitted]  [big]
server started at localhost:8080
error during render : /
ReferenceError: window is not defined
    at Object.<anonymous> (src/mock/menu.js:75:15)
    at __webpack_require__ (webpack:/webpack/bootstrap 886ec991fabfc0442bcd:25:0)
    at Object.module.exports.DIC.SEX.label (server-bundle.js:6442:69)
    at __webpack_require__ (webpack:/webpack/bootstrap 886ec991fabfc0442bcd:25:0)
    at Object.module.exports.module.exports (server-bundle.js:7221:68)
    at __webpack_require__ (webpack:/webpack/bootstrap 886ec991fabfc0442bcd:25:0)
    at Object.<anonymous> (server-bundle.js:734:72)
    at __webpack_require__ (webpack:/webpack/bootstrap 886ec991fabfc0442bcd:25:0)
    at Object.<anonymous> (server-bundle.js:2048:65)
    at __webpack_require__ (webpack:/webpack/bootstrap 886ec991fabfc0442bcd:25:0)
error during render : /favicon.ico

image

I am getting this error after I ran npm start.

$ node -v
v8.10.0

cdn版本问题

image
image

依赖中vuex的版本是3.0.1,可是项目里外链cdn的版本却是2.4.1,需要手动去更新;
建议加个自动校验更新cdn版本的功能

[建议]左侧菜单固定宽度

左侧菜单固定宽度,不要宽度变小左侧菜单宽度也变小。当宽度小于某值得时候缩起来就行了。

提问的技巧

为了高效解决问题,请大家有技巧的使用issue,不按照格式提交的直接拒绝处理,感谢支持和理解

错误描述
提供必要的回显步骤。

异常日志
注意使用MD语法 日志 使用 ``格式化日志,越多详细越好

版本号

异常截图和代码
issue 支持直接粘贴

表格查询条件必填项验证

通过avue-crud 这是搜索属性来查询列表,但是这些设置的查询条件,无法设置必填项,以及验证规则

拖动重排序功能可以整合到表格组件中

安装
npm i sortablejs -S

Demo代码
<template>
<avue-crud ref="dragTable" v-model="data" :data="list" :option="option">
<template slot="drag">
<svg-icon class="drag-handler" icon-class="drag" />
</template>
</avue-crud>
</template>

<script>
import Sortable from 'sortablejs'

export default {
data() {
return {
data: {},
list: [
{
id: 1,
name: '张三',
sex: '男',
date: '1994-02-23 00:00:00'
},
{
id: 2,
name: '李四',
sex: '女',
date: '1994-02-23 00:00:00'
},
{
id: 3,
name: '王五',
sex: '女',
date: '1994-02-23 00:00:00'
},
{
id: 4,
name: '赵六',
sex: '男',
date: '1994-02-23 00:00:00'
}
],
option: {
title: '表格的标题',
border: true,
align: 'center',
menuAlign: 'center',
menu: false,
column: [
{
label: '姓名',
prop: 'name'
},
{
label: '性别',
prop: 'sex'
},
{
label: '日期',
prop: 'date',
type: 'date',
format: 'yyyy-MM-dd hh:mm:ss',
valueFormat: 'yyyy-MM-dd hh:mm:ss'
},
{
label: '拖动重排序',
prop: 'drag',
slot: true
}
]
}
}
},
created() {
this.$nextTick(() => {
setTimeout(() => this.setSort(), 3000)
})
},
methods: {
setSort() {
const el = this.$refs.dragTable.$refs.table.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
this.sortable = Sortable.create(el, {
ghostClass: 'sortable-ghost',
setData: function(dataTransfer) {
dataTransfer.setData('Text', '')
},
onEnd: evt => {
const targetRow = this.list.splice(evt.oldIndex, 1)[0]
this.list.splice(evt.newIndex, 0, targetRow)
}
})
}
}
}
</script>

<style>
.sortable-ghost {
opacity: .8;
color: #fff!important;
background: #42b983!important;
}
</style>

<style scoped>
.drag-handler {
width: 20px;
height: 20px;
cursor: pointer;
}
</style>

icon-select 中自己的iconfont图标无法正常显示

无法正常显示,变成一个框框

<i class="avue-crud-icon-select__icon icon-shuaxintongbu"></i> 

改成以下方式就可以了

<i class=" icon-shuaxintongbu  avue-crud-icon-select__icon"></i>

动态修改 iconList 无法更新icon

如何新增图标?

请问一下,如果是修改./src/config/env.js为自己的iconfont项目,之前的图标是不是都没了?

upload组件无法定义表单字段

和后台的通讯中,上传的表单字段是‘img’,是{‘img’: file},不是默认的{‘file’:file},想修改时发现upload中不能定义表单字段,代码定位到‘packages/crud/src/crud-upload.vue’中:
const file = config.file;
this.file = config.file;
const headers = { 'Content-Type': 'multipart/form-data' }
let param = new FormData()
param.append('file', file, file.name)
所以,应该是avue不能定义上传的表单字段,写死了是‘file’,希望能够添加自定义表单字段的功能。类似:
const name = config.name
.......
param.append(name,file,file.name)
的形式。
当然也有可能是我水平不够,没发现自定义的地方,希望能够指点一下,该如何自定义表单名字。

表格新增动态显隐怎么实现

通过avue-crud 出现的新增, 编辑弹窗里面有需求是 是组件动态显隐怎么做呢?
例如 根据用户的级别高低 这个下拉框的值
来决定是否显示充钱多少的下拉框

关注Avuex的导出功能

我看了官网导出的例子,AvueX的option配置excelBtn: true,但是导出按钮出现了,点击没有效果,是额外要写js嘛?急,在线等qaq

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.