Vue + ElementUI表格内实现图片点击放大效果

<el-table-column property="activity_name" show-overflow-tooltip label="活动标题"><template slot-scope="scope"><div class="one_reapet">{{ scope.row.activity_...

小山羊~

3863人浏览 · 2020-03-01 17:59:00

小山羊~ · 2020-03-01 17:59:00 发布

 <el-table-column property="activity_name" show-overflow-tooltip label="活动标题">
            <template slot-scope="scope">
              <div class="one_reapet">{{ scope.row.activity_name }}</div>
              <el-popover placement="bottom" trigger="click"> <!--trigger属性值：hover、click、focus 和 manual-->
                <a :href="scope.row.qrcode_url" target="_blank" title="查看最大化图片">
                  <img :src="scope.row.qrcode_url" style="width: 160px;height: 160px">
                </a>
                <img slot="reference" :src="scope.row.qrcode_url" style="width: 50px;height: 50px; cursor:pointer" />
              </el-popover>
            </template>
 </el-table-column>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^