需求:在下拉框中选择图标,并同时显示图标和文字,以便用户可以直观地选择所需的图标。
{{ item.iconDesc }}
说明:imageList数组是从接口中获取的,iconDesc表示图标描述,iconAddress表示图标地址
下拉框选中图标后页面没有显示图标,但当手动拖动el-table组件的图标列宽度时,此时图标列的宽度发生了变化,选中的图标就在页面中显示了
这个问题是由于在渲染 el-table
组件时,图标列所在的单元格高度没有被正确计算,导致下拉框和图片无法显示。拖动表格宽度后,单元格高度重新计算,就能正常显示了。
在 iconChange
方法中手动触发表格重新渲染的操作,让表格重新计算单元格高度,从而使下拉框和图片正常显示。
el-table
组件的 :key 属性上绑定tableKey属性总结:这样做的效果是,每次下拉框选中了新的图标时,会手动更新
tableKey
的值,从而触发表格重新渲染,使下拉框和图片正常显示。
最后: