当前位置:   article > 正文

vue、elment中el-table-column标签下el-link中无法绑定数据源问题_el-table-column el-link

el-table-column el-link

1、问题如下,el-link中,如果不用prop属性,直接绑定字段不显示数据

  1. <div class="manifest">
  2. <h2 class="title">采购清单</h2>
  3. <el-table :data="tableData.demandPurchases" style="width: 100%">
  4. <el-table-column align="center" label="序号" type="index" width="60" />
  5. <el-table-column prop="itemName" label="物品名称" width="180" />
  6. <el-table-column prop="modelSpecification" label="规格型号" width="180" />
  7. <el-table-column prop="category" label="所属类目" />
  8. <el-table-column prop="quantity" label="采购数量" />
  9. <el-table-column prop="unit" label="计量单位" />
  10. <el-table-column prop="requirements" label="需求说明" />
  11. <el-table-column label="附件">
  12. <el-link target="_black" :underline="false" :href="attachmentUrl" prop="attachmentName">
  13. {{attachmentName}}.pdf
  14. </el-link>
  15. </el-table-column>
  16. </el-table>
  17. </div>

2、需要加一层template,设置#default="scope"

        <div class="manifest">

            <h2 class="title">采购清单</h2>

            <el-table :data="tableData.demandPurchases" style="width: 100%">

                <el-table-column align="center" label="序号" type="index" width="60" />

                <el-table-column prop="itemName" label="物品名称" width="180" />

                <el-table-column prop="modelSpecification" label="规格型号" width="180" />

                <el-table-column prop="category" label="所属类目" />

                <el-table-column prop="quantity" label="采购数量" />

                <el-table-column prop="unit" label="计量单位" />

                <el-table-column prop="requirements" label="需求说明" />

                <el-table-column label="附件">

                    <template #default="scope">

                        <el-link target="_black" :underline="false" :href="scope.row.attachmentUrl" prop="attachmentName">

                            {{scope.row.attachmentName}}.pdf

                        </el-link>

                    </template>

                </el-table-column>

            </el-table>

        </div>

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号