vue可填写表格_vue 可编辑表格组件

{ {item}}

{ {key1+1}}

{ {(item2.title?item2.title:'')}}

{ {item3.text?item3.text:item3.prodName}}

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="currentPage4"

:page-sizes="[10, 20, 30, 40]"

:page-size="10"

layout="total, sizes, prev, pager, next, jumper"

:total=pageTotal>

导出

title="提示"

:visible.sync="dialogVisible"

width="30%"

>

{ {dialogVisibleTitle}}

取 消

确 定

import export2Excel from "./exporExcel"

export default {

data() {

return {

currentPage4: 1,

// Edit:false,

dialogVisible: false, //提示面板

dialogVisibleTitle: "", // 面板提示信息

dialogVisibleType: "", //提示面板触发的事件

tebleDate: [], // 某一页的值

thshow: false, // 显示编辑

i: Number, // 行的下标

checkboxs: true,

export2Excelshow:false,

checked: false, //

tdPicth: [], // 点击选中

itemModel: null, // 点击行的值

tabkey: Number, // 编辑的下标

tebleDateSize: Array, // 获取到的列表数据

pagesize: 10, // 每页显示的条数

pageTotal: 0, //总共多少条数据

};

},

components:{export2Excel},

props: ["tebleDateAll", "addTableValue", "tebleTop", "Editchent"], // Editchent:是否需要编辑功能，tebleDateAll：格单内容，tebleTop：表格标题,dbselectShow:打开编码转换

watch: {

// 监听从父级传来的 表格数据变化

tebleDateAll(val) {

this.tablesave()

this.tebleDateSize = val;

this.tebleDate = val.slice(0, 10); // 页面默认显示10条数据