| Avue.js 是基于现有的element-ui库进行的二次封装，从而简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富了数据展示组件，让开发变得更加容易.
前言在实际开发过程，需要多级复杂的动态表头，表头中的内容是动态填充的。以下是avuejs官网提供的负责表头样式，因此我后台返回的数据，需要拼接avue-crud中的json格式。 
实际开发中需要拼接成，column这种格式。 column: [{ label: '姓名', prop: 'name', width:140, }, { label: '性别1', prop: 'sex', }, { label: '自定义图标', prop: 'icon', type: "icon", iconList: [{ label: '基本图表', list: ['el-icon-time', 'el-icon-bell', 'el-icon-star-on'] }] }, { label: '复杂表头', children: [{ label: '信息', children: [{ label: '年龄', prop: 'age' }, { label: '手机号', prop: 'phone', }] }, { label: '地区', prop: 'address', type: 'select', props: { label: 'name', value: 'code' }, dicUrl:'https://cli.avuejs.com/api/area/getProvince' }] }, { label: '测试', prop: 'test', }, { label: '手机信息1', prop: 'phone1' }], }, data: [{ name: '张三', age: 14, address: '110000', phone1: '17547400800', phone: '17547400800', icon: 'el-icon-time', test: 1, sex: '男' }, { name: '王五', age: 10, address: '120000', test: 1, sex: '女', icon: 'el-icon-star-on', phone1: '17547400800', phone: '17547400800' }]
后台数据拼接@GetMapping("/getTableHeader") public R getTableHeaderJson(){ Map<String,Object> map = new HashMap<>(); StringBuilder sb = new StringBuilder(); sb.append("{label: '工序',children: ["); List<FactoryProcess> processList = factoryProcessService.list(); for (int i = 0; i < processList.size(); i++) { String pid = processList.get(i).getProcessId(); sb.append("{label:'" + processList.get(i).getProcessName() + "',prop:'" + pid + "',"); sb.append("children:[{label: '单价',prop: 'price" + pid + "'}, " + "{label: '合计',prop: 'sum" + pid + "'},{label: '完成数量',prop: 'completeNum" + pid + "'}, " + "{label: '质检合格数量',prop: 'qualifiedNum" + pid + "'}," + " {label: '质检不合格数量',prop: 'unqualifiedNum" + pid + "'}, " + "{label: '报废数量',prop: 'scrapNum" + pid + "'}]").append("},"); }; sb.append("]}"); map.put("cols",sb.toString()); return R.data(map); }
前台数据展示
下载地址:
Vue3生命周期函数和方法详解
avue实现自定义搜索栏及清空搜索事件的实践
|
