vue处理原生表格

<template>
    <div class="contentTemplate">
        <cn-header :topTitle='topTitle'></cn-header>
        <div  class="content" ref="content" @scroll="dropDown()">
            <i-button type="primary" size="small" @click="changeRoute(0)">新建模板</i-button>
            <table class="con_list" v-if="template.length">
                <thead>
                     <tr class="con_item con_item1  clearfix">
                        <td class="item_name" >名称</td>
                        <td class="item_classify">分类</td>
                        <td class="item_use">使用次数</td>
                        <td class="item_collect">收藏次数</td>
                        <td class="item_operate">操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-if="template.length"  class="con_item con_items clearfix" v-for="(item,index) in template" :key="item.id + index">
                        <td class="item_name">{{item.title}}</td>
                        <td class="item_classify">{{item.categoryName}}</td>
                        <td class="item_use">{{item.useCount}}</td>
                        <td class="item_collect">{{item.storeCount}}</td>
                        <td class="item_operate">
                            <span @click="lookPpreview(item.id)"><i style="font-size:16px; margin-right:5px;  " class="iconfont icon-oc-search"></i>查看</span>
                            <span @click="changeRoute(item.id)"><i style="font-size:16px; margin-right:5px;  " class="ivu-icon ivu-icon-compose"></i>编辑</span>
                            <span @click="user(item.id)"><i style="font-size:16px; margin-right:5px;  " class="iconfont icon-oc-templet"></i>使用</span>
                            <span>
                                <Poptip
                                    placement='bottom'
                                    confirm
                                    title="确定要删除么？"
                                    @on-ok="removeNewsTemplate(item.id)"
                                    ok-text="是"
                                    cancel-text="否">
                                    <i><i style="font-size:16px; margin-right:5px;  " class="ivu-icon ivu-icon-trash-a"></i>删除</i>
                                </Poptip>
                            </span>
                        </td>
                    </tr>
                    <div v-else v-show="index == 1" style="color: #999;padding: 20px;">暂无数据</div>
                </tbody>

            </table>
            <Page v-if="total > 10" placement='top' show-sizer show-total show-elevator  :total="total" class="page"  @on-page-size-change='changePageSize' @on-change='getNewsTemplate'></Page>
            <Spin fix v-if="Loading" >
                <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
                <div>Loading</div>
            </Spin>
        </div>
        <preview v-show="isLookPpreview" :view='view' :lookPpreview='lookPpreview'></preview>
    </div>
</template>
<script>
import cnHeader from '../../new/common/cnHeader'
import preview from '../../new/preview'

import {
  getNewsTemplateList,
  getNewsTemplateRemove,
  getNewsTemplateDetail,
} from "../../../api/news.js";

export default {
    name:'contentTemplate',
    components:{cnHeader,preview},
    data(){
        return{
            total:0,
            view:{content:'',id:'',outlink:''},
            isLookPpreview:false,
            topTitle:'内容模板',
            template:[],
            Loading:false,
            limit:10,
        }
    },
    methods:{
        // 修改每页显示条数
        changePageSize(size){
            this.limit = size
            this.getNewsTemplate(1)
        },
        lookPpreview(id){
            if(!id){
                this.isLookPpreview = !this.isLookPpreview
                return
            }
            getNewsTemplateDetail(id, r => {
                let data = r. data.data
                this.view.title = data.title
                this.view.content = data.content
                this.view.outlink = data.outlink
                this.isLookPpreview = !this.isLookPpreview
            })
        },
        // 获取新闻模板
        getNewsTemplate(page){
            let data={
                limit: this.limit,
                offset:(page -1) * this.limit
            }
            this.nProgress.start();
            this.Loading = true
            getNewsTemplateList(data, r => {
                this.template = r.data.data
                this.total = r.data.total
                this.nProgress.finish();
                this.Loading = false
            })
        },
        // 删除
        removeNewsTemplate(id){
            let data={
                id
            }
            getNewsTemplateRemove(data, r => {
                this.$Message.info('删除成功!')
                let arr =[]
                this.template.forEach((item)=>{
                    if(item.id!=id){
                        arr.push(item)
                    }
                })
                this.template = arr
          })
        },
        // 使用
        user(_id){
            this.$router.push({ name: 'addDynamic', params: {id:0, _id}})
        },
        // 修改
        changeRoute(id){
            this.$router.push({ name: 'addClassify', params: {id}})
        },
    },
    mounted(){
        this.getNewsTemplate(1)
    }

}
</script>
<style lang="scss" scoped>
    .contentTemplate{
        height: 100%;
        background: #fff;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .content{
            padding: 16px;
            background: #fff;
            flex: 1;
            overflow-x: hidden;
            overflow-y: auto;
            button{
                width: 80px;
                border-color: #cc0001;
                background: #cc0001;
                color: #f6cfd0;
            }
            .con_list{
                font-size: 12px;
                // width: 906px;
                // min-width: 906px;
                .con_item{
                    border-bottom: 1px solid #eeeeee;
                    color: #626262;
                    td{
                        height: 48px;
                        line-height: 48px;
                    }
                    // .item_name{
                    //     width: 232px;
                    // }
                    // .item_classify{
                    //     width: 168px;
                    // }
                    // .item_use{
                    //     width: 128px;;
                    // }
                    // .item_collect{
                    //     width: 144px;
                    // }
                    // .item_operate{
                    //     width: 233px;
                    // }
                }
                .con_item1{
                    color: #dddddd !important;
                }
                .con_items{
                    .item_operate{
                        span{
                            color: #176ed5;
                            cursor: pointer;
                            float: left;
                            width: 57px;
                            &:nth-of-type(1){
                                i{
                                    transform: rotate(-45deg);
                                }
                            }
                            &:nth-of-type(4){
                                margin: 0;
                            }
                        }
                    }
                }
            }
        }
    }
    @media (min-width: 906px) {
        .con_list {
           width: 906px;
           .item_name{
                width: 232px;
            }
            .item_classify{
                width: 168px;
            }
            .item_use{
                width: 128px;;
            }
            .item_collect{
                width: 144px;
            }
            .item_operate{
                width: 233px;
            }
        }
    }
    @media (max-width: 906px) {
        .con_list {
           width: 100%;
        }
    }
</style>