在动态获取数据时，想要渲染后面的图标是根据数据的长度渲染图标位置，效果如下： 

代码如下： 

<el-row :gutter="60"><el-col :span="24"><el-form-item><el-input v-model.trim="formData.name" readonly><template slot="prepend"><el-popover placement="bottom" width="600" trigger="click"><!-- 初始化界面---这里是点击“选择成员”按钮触发的一个页面 --><AddNewPerson v-if="visibleFunction === true" /><el-button slot="reference" @click="visibleFunction">+选择成员</el-button></el-popover><span v-if="formData.name" class="font-red el-icon-close" style="cursor: pointer;position: absolute;transform: translateX(-50%);top: 5px;" :style="{ left: calculateLeftPosition(formData.lkmCustName) }"             @click="toChangeCus()"/></template></el-input></el-form-item></el-col>
</el-row>

methods: {// 计算偏移量calculateLeftPosition(str) {const length = str.length;// 设置基准位置，根据实际需求进行调整const basePosition = 150;// 设置每个字符的偏移量，根据实际需求进行调整const offset = 12;// 计算最终的left值const leftPosition = basePosition + (length * offset);return leftPosition + 'px';},// 清空数据toChangeCus() {this.formData.name = '';}
}