域名解析完成网站怎么做,淄博网站推广那家好,在线生成网站,如何网络推广一、背景
需求#xff1a;在下拉框中选择图标#xff0c;并同时显示图标和文字#xff0c;以便用户可以直观地选择所需的图标。
二、功能实现
templatedivel-table reftable :datafeatureCustom2List height200…一、背景
需求在下拉框中选择图标并同时显示图标和文字以便用户可以直观地选择所需的图标。
二、功能实现
templatedivel-table reftable :datafeatureCustom2List height200 bordertrueel-table-column label图标 propprop width150 aligncenter header-aligncenterdiv classiconSelectimg :src/minigram/${selectedImage} v-ifselectedImage altSelected Image width20 height20 /el-select v-modelselectedImage placeholder请选择 changeiconChange sizemini style width: 100px;margin-left: 10px;el-optionv-foritem in imageList:keyitem.id:labelitem.iconDesc:valueitem.iconAddressimg :src/minigram/${item.iconAddress} altSelected Image width20 height20span stylemargin-left: 10px;{{ item.iconDesc }}/span/el-option/el-select/div/el-table-column/el-table/div
/templatescript
export default {data() {return {selectedImage: ,//选中的图标featureCustom2List:[],//表格数据集合从接口获取的数据imageList:[],//图标数据集合从接口获取的数据};},methods: {//监听下拉框iconChange(e){//下拉框选中的图标进行赋值this.selectedImage e}}
}
/script 说明imageList数组是从接口中获取的iconDesc表示图标描述iconAddress表示图标地址 三、下拉框选中图标后无显示
3.1、问题描述
下拉框选中图标后页面没有显示图标但当手动拖动el-table组件的图标列宽度时此时图标列的宽度发生了变化选中的图标就在页面中显示了
3.2、问题分析
这个问题是由于在渲染 el-table 组件时图标列所在的单元格高度没有被正确计算导致下拉框和图片无法显示。拖动表格宽度后单元格高度重新计算就能正常显示了。
3.3、解决方法
在 iconChange 方法中手动触发表格重新渲染的操作让表格重新计算单元格高度从而使下拉框和图片正常显示。
① 在 data() 中新增一个名为 tableKey 的属性用于指定表格唯一的 key 值 ② 在el-table 组件的 :key 属性上绑定tableKey属性 ③ 在 iconChange 方法中修改 selectedImage 的值后手动更新 tableKey 的值 总结这样做的效果是每次下拉框选中了新的图标时会手动更新 tableKey 的值从而触发表格重新渲染使下拉框和图片正常显示。 3.4、最终效果 最后
