vue element表格图片点击放大

308 阅读1分钟
  <el-table-column prop="imgArr" label="话题图片" min-width="360">
          <template slot-scope="scope">
            <span v-for="(item, index) in scope.row.img" :key="index">
              <el-popover placement="right" width="400" trigger="click">
                <img :src="item" width="380px" height="380px" />
                <img
                  slot="reference"
                  :src="item"
                  width="100px"
                  height="100px"
                  style="margin-right: 10px"
                />
              </el-popover>
            </span>
          </template>
        </el-table-column>
        
 // 获取列表
    async getList() {
      const {
        data: { count, list },
      } = await subjectLstApi(this.pagination);
      this.form = list;
      this.total = count;
      // console.log(JSON.parse(this.form[0].img));
      this.form = this.form.map((item) => {
        return {
          ...item,
          img: JSON.parse(item.img),
        };
      });
      console.log(this.form, "form");
    },

image.png