vue处理原生表格

66 阅读 0 评论 44 点赞

我是靠谱客的博主虚幻西装，最近开发中收集的这篇文章主要介绍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>