根据渲染数据长度动态渲染后缀图标

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

代码如下： 

<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 = '';
    }
}