vue后台管理图片上传

翻斗花园vue战士

已于 2023-05-04 14:56:31 修改

阅读量170

点赞数

文章标签： vue.js javascript

于 2023-04-06 13:07:16 首次发布

本文链接：https://blog.csdn.net/qq_54588073/article/details/129987012

版权

<template>
  <div class="top">
    <div>
      <el-breadcrumb separator="">
        <el-breadcrumb-item :to="{ path: '/bannerManage' }" class="thematic">首页banner管理></el-breadcrumb-item>
        <el-breadcrumb-item>首页banner管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="menu">
      <el-button type="primary" @click="append">新建</el-button>
    </div>
    <el-row>
      <el-col :span="5">
        <p class="toptitle">标题</p>
      </el-col>
      <el-col :span="5">
        <p class="toptitle">地址</p>
      </el-col>
      <el-col :span="5">
        <p class="toptitle">pc端图片</p>
      </el-col>
      <el-col :span="5">
        <p class="toptitle">移动端图片</p>
      </el-col>
      <el-col :span="4">
        <p class="toptitle">操作</p>
      </el-col>
    </el-row>
    <div class="content">
      <el-table :data="bannerList" style="width: 100%">
        <el-table-column label="标题" width="200">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{
  { scope.row.bannerDTO.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="url" width="200">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{
  { scope.row.bannerDTO.url }}</span>
          </template>
        </el-table-column>
        <el-table-column label="img" width="200">
          <template slot-scope="scope">
            <img :src="scope.row.bannerDTO.img" alt="" width="100px" height="50px">
          </template>
        </el-table-column>
        <el-table-column label="imgSm" width="200">
          <template slot-scope="scope">
            <img :src="scope.row.bannerDTO.imgSm" alt="" width="1