vue Element-UI table 内容图片，图片放大，tag 标签.....

<div class="main" >

    <!--table 请求数据前动画  v-loading-->
    <!--v-loading：table 请求数据前动画-->

    <el-table :data="tableData" style="width: 100%" :height="fullHeight"
       v-loading="!tableData"
       element-loading-text="数据加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"
       empty-text="暂无数据">
        <el-table-column fixed type="index" label="序号" ></el-table-column>
        <el-table-column fixed type="coverPlan" label="封面图片" >
          <template slot-scope="scope">

            <!-- 弹出框 显示放大图片 el-popover 
                trigger属性值：hover、click、focus 和 manual
             -->
                
            <el-popover placement="top-start" trigger="hover">
                <!--a标签点击后打开新网页显示图片,不需要可以注释a标签-->
		        <a :href="scope.row.coverPlan" target="_blank" title="查看最大化图片">
                    <img :src="scope.row.coverPlan" style="width: 300px;height: 300px" />
                </a>
				<img slot="reference" :src="scope.row.coverPlan" style="width:50px;height: 50px; cursor:pointer" />
			</el-popover>
          </template>
        </el-table-column>
        <el-table-column fixed prop="title" label="标题" ></el-table-column>
        <el-table-column fixed prop="createTime" label="创建时间" ></el-table-column>
        <el-table-column fixed prop="status" label="状态1" >
          <template slot-scope="scope">
             <!-- 开关 el-switch 
                 开关显示的值           开关高亮的文字
                active-value="1"     active-text="已发布" 
                inactive-value="0"   inactive-text="未发布"
                开关改变函数change
             -->
            <el-switch v-model="scope.row.status" active-text="已发布" active-value="1" inactive-text="未发布" inactive-value="0" @change="changeStatus(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" >
            <!-- tag标签 -->
           <template slot-scope="scope">
              <el-tag type="warning" v-if="scope.row.state==='1'" >待审核</el-tag>
              <el-tag type="green" v-if="scope.row.state==='2'">已通过</el-tag>
              <el-tag type="danger" v-if="scope.row.state==='3'">未通过</el-tag>
           </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" >
          <!--
             点击后展示新闻详情预览
             新窗口带参数跳转 js代码如下
           -->
          <template slot-scope="scope">
            <el-button @click="previewRow(scope.row)" type="text" size="small">预览</el-button>
            <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
    </el-table>
</div>

    //跳转新闻预览  跳转到新页面后,通过id查找对应新闻信息,渲染页面
    previewRow(row){
        let routeUrl = this.$router.resolve({
           name: "preview",
           query: {
             id:row.id
           }
         });
         window.open(routeUrl.href, '_blank');
    },

table请求数据动画:

图片放大效果:

开关效果:带接口请求

Tag标签：