新手vue+element-ui笔记

知恩PM

已于 2023-03-07 10:43:30 修改

阅读量83

点赞数

分类专栏： vue记事本文章标签： elementui 前端 javascript 前端框架 Powered by 金山文档

于 2023-03-06 18:30:43 首次发布

本文链接：https://blog.csdn.net/ZhienPM/article/details/129367456

版权

这篇博客详细记录了新手在使用Vue和Element-UI框架时，如何实现el-table表格数据的动态输出以及el-upload照片墙上传功能。在el-table中，通过插槽来获取myDatas中的数据，对于每一行(row)进行操作。而对于el-upload，作者提到了照片墙上传的实现，并提及了校验必填项的需求。

摘要由CSDN通过智能技术生成

el-table 表格输出

table的唯一key值要加，不然会导致表格渲染的数据有问题。

//假设是这种数据格式
myDatas:{
    id:"001",
    name:"whatever",
    time:"2023-03-07"
}

<el-table v-loading="loading" :data="myDatas"  key="whatever">
    <el-table-column label="订单编号" prop="id" min-width="110px" />
    <el-table-column label="订单编号" prop="name" min-width="110px" />
    <el-table-column label="订单编号" prop="time" min-width="110px" />
    <el-table-column label="操作" align="right" min-width="150px">
        <template slot-scope="{ row }"> 
            <el-button @click="onQueryDetails(row,'detail')">查看详情</el-button>
          </template>
    </el-table-column>
</el-table>

如果不是直接输出，就要用插槽包裹才能拿到myDatas里面的数据,row是表格中的一行数据。