HEX中文网-Vue+elementUI实现动态展示列表的数据
HEX中文网
你的位置:HEX中文网 > HEX中文网 > Vue+elementUI实现动态展示列表的数据
Vue+elementUI实现动态展示列表的数据
发布日期:2025-01-04 15:33    点击次数:175
Vue elementUI动态展示列表的数据 需求描述 活动查看的时候,根据后台返回的数据,动态渲染列和每行数据。 后台返回的数据结构如下 html data定义需要用到的字段 调接口,成功后,将data.answers的值赋值给activityData. getCol方法获取需要循环的列label和值prop 获取表格的数据 Vue elementUI注意事项 多选框对应List<object> 1.el-select标签 这个标签里对应的就是后台发过来的数据格式 如果后台发来的数据是List<String>,即["1", "2", "3"]这种格式,则这个标签里value-key="id"就可以不用加了,重点在于el-option标签的key与其对应就可以了 如果后台数据是List<object>,即[{"id": "1", "name": "一"}, {"id": "2", "name": "二"}, {"id": "3", "name": "三"}]这种格式,那么就要加上value-key="id",将list<object> 里的对象的key与el-option里的objList的key对应 2.el-option标签 key,就是用来用来作为标识对应的label,就是用来前端展示内容的value,是选完之后向后端传递数据的,如果填的是item.id那么传出的数据就只有id的数组,如果是item的话会将整个结构传出 输入框判断条件 1.格式判断 只能输入数字和两位小数 只能输入数字 可以直接在el-input 标签内加上 οnkeyup="value=value.replace(/[^\d]/g,'')" 即可 2.使用方法加入输入框格式判断数字和两位小数 入参key即为addOrEdit这个数组里面的字段名 在el-input 标签内加入:change="check_price('name')"即可 3.提交判断 即使加上以上判断后输入框提示了,但是如果提交的处理没进行判断的话还是可以提交而导致后端出错。 所以当点击提交时,应将下面的addOrEdit替换为所需数组名称,如果通过再执行提交的逻辑 自定义弹窗格式 1.const h = this.$createElement; 新建一个html内容的容器 2.this.$msgbox({}).then(() => {}).catch((err) => {}); 用来新建一个弹窗 以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。