您可以尝试使用v-bind指令将data-product-name属性绑定到td元素上,并在click事件处理程序中传递该属性的值作为参数。以下是修改后的代码示例:

<div class="Products">
    <table>
        <tr th:each="product, productStat : ${indexProducts}" th:if="${productStat.index % 3 == 0}">
            <td :data-product-name="product.name" @click="getDialogData($event.target.getAttribute('data-product-name'))">
                <el-image class="ProductImage" th:src="${product.imgUrl}" :fit="'cover'"></el-image>
                <span class="ProductName" th:text="${product.name}">product-name</span>
            </td>
            <td :data-product-name="indexProducts[productStat.index + 1].name" @click="getDialogData($event.target.getAttribute('data-product-name'))">
                <el-image class="ProductImage" th:src="${product.imgUrl}" :fit="cover"></el-image>
                <span class="ProductName" th:text="${indexProducts[productStat.index + 1].name}">product-name</span>
            </td>
            <td :data-product-name="indexProducts[productStat.index + 2].name" @click="getDialogData($event.target.getAttribute('data-product-name'))">
                <el-image class="ProductImage" th:src="${product.imgUrl}" :fit="cover"></el-image>
                <span class="ProductName" th:text="${indexProducts[productStat.index + 2].name}">product-name</span>
            </td>
        </tr>
    </table>
    <el-button type="primary" @click="dialogVisible = true">Click</el-button>
    <el-dialog title="Tips" v-model="dialogVisible">
        <div class="dialog">
            <div class="dialogLeft">
                <el-image class="dialogImage" src="" :fit="cover"></el-image>
            </div>
            <div class="dialogRight"></div>
        </div>
    </el-dialog>
</div>

通过将data-product-name属性绑定到td元素上,您可以在click事件处理程序中使用$event.target.getAttribute('data-product-name')获取该属性的值并传递给getDialogData方法。这样,您就可以将参数正确传递给方法了

这是我的前端代码:div class=Products table tr theach=product productStat $indexProducts thif=$productStatindex 3 == 0 td thattr=data-product-name=$pro

原文地址: https://www.cveoy.top/t/topic/iUkm 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录