2021-07-13 山东大学软件学院暑期项目实训day11

学习目标：

---

学习内容：

1. 在vue中实现字符串的拼接：由于后端传给前端的二维码只是base64格式的数据，需要将‘data:image/png;base64,’和该数据拼接起来才能在前端展示出来。vue中各种字符串的拼接有多种方式：
   （1）文件绑定{{}}中的字符串拼接：直接在{{}}内拼接：
   <p>{{'data:image/png;base64,'+scope.row.act_img}}</p>
   （2）vue标签属性绑定中的字符串拼接：写法有两种：
   :title="字符串${xx}" 或 :title="'字符串' + xx"
   （其中，{}里面可以写js方法）
   <img :src="'data:image/png;base64,'+scope.row.act_img">
   （3）js中的字符串拼接：
   是否确认切换状态为${row.isDelete === 1 ? '否' : '是'}？
${item.userName}(${item.account})
2. 对所有活动的展示方法进行美化，修改为如下效果：
   
   代码如下：

<el-table-column label="活动名称">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>活动ID：{{scope.row.act_id}}</p>
                <p>活动教室：{{scope.row.room_name}}</p>
                <p>活动开始时间：{{scope.row.act_start_time}}</p>
                <p>活动结束时间：{{scope.row.act_end_time}}</p>
                <p>开始预约时间：{{scope.row.pick_start_time}}</p>
                <p>截止预约时间：{{scope.row.pick_end_time}}</p>
                <p>活动简介：{{scope.row.act_desc }}</p>
                <p>活动二维码：</p>
                <img :src="'data:image/png;base64,'+scope.row.act_img">
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium" style="background-color: white;">{{ scope.row.act_name }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>

3. gitee上传，具体文件作用，练习使用gitee，从上面下载、上传代码，实现共同协作。
   参考：添加链接描述
   

---