{{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條資料
this.pageTotal = val.length;
}
},
methods: {
dbselect(s) { // 轉換編碼
function convert(all, val) {
var title;
for (var i in all) {
if (all[i].prodCode == val) {
title = all[i].prodName;
}
if (all[i].value == val) {
title = all[i].text;
}
}
return title;
}
var that = this
function correlation(value) { // 關聯資料
for (var i in value) {
console.log();
if (value[i].relevance) {
for (var j in value) {
if (
value[i].relevance &&
value[i].relevance == value[j].relevance
) {
if (i != j) {
if(that.dbselectShow){
if (convert(s.data, value[j].title)) {
value[i].title = convert(s.data, value[j].title);
}
}else{
value[i].title = value[j].title
}
}
break;
}
}
}
}
}
for (var i in this.tebleDate) {
correlation(this.tebleDate[i]);
}
},
handleSizeChange(val) {
// 選擇每頁顯示的資料
console.log(`每頁 ${val} 條`);
this.pagesize = val;
function sliceArr(array, size) {
var result = [];
for (var x = 0; x < Math.ceil(array.length / size); x++) {
var start = x * size;
var end = start + size;
result.push(array.slice(start, end));
}
return result;
}
this.tebleDate = sliceArr(this.tebleDateSize, val)[0];
},
handleCurrentChange(val) {
// 選擇顯示第幾頁
function sliceArr(array, size) {
var result = [];
for (var x = 0; x < Math.ceil(array.length / size); x++) {
var start = x * size;
var end = start + size;
result.push(array.slice(start, end));
}
return result;
}
this.tebleDate = sliceArr(this.tebleDateSize, this.pagesize)[val - 1];
},
getTableVlue() {
//重新整理
this.$store.dispatch("Warranty/getWarranty");
},
tableEdit(key, item) {
// 可編輯
console.log(this.Editchent);
this.itemModel = item; // 點選時行的值寫入到輸入預設
this.i = key; // 行的下标
this.thshow = true; // 顯示可以輸入
this.tabkey = key; // 輸入行的下标
},
tablesave(title) {
//儲存
if (title) {
this.dialogVisibleTitle = title;
this.dialogVisible = true;
this.dialogVisibleType = "tablesave";
} else {
if (this.tebleDate == "") {
// 判斷添加時的值不能為空
return;
}
for (var i in this.tebleDate) {
for (var j in this.tebleDate[i]) {
if (this.tebleDate[i][j].title == "") {
console.log("輸入不能為空");
return;
}
}
}
if (this.itemModel) {
console.log(this.itemModel);
this.tebleDate[this.tabkey] = this.itemModel;
this.thshow = false;
console.log(this.tebleDate);
}
this.tabkey = null;
}
},
tabSaveSub(url) {
// 送出和儲存
this.tablesave();
var that = this;
this.$store.dispatch(url, that);
},
checkedAll() {
// 全選和反選
var _this = this;
console.log(_this.checked);
if (this.checked) {
_this.tdPicth = [];
} else {
_this.tdPicth = [];
_this.tebleDate.forEach(function(item, key) {
_this.tdPicth.push(item);
});
}
},
tabremoveBut(v) {
// 提示面闆事件
if (v) {
switch (this.dialogVisibleType) {
case "tabremove":
this.tabremove();
this.dialogVisible = false;
break;
case "tablesave":
this.tablesave();
this.dialogVisible = false;
break;
default:
}
} else {
this.dialogVisible = false;
}
},
tabremove(title) {
// 删除選中
if (title) {
this.dialogVisibleTitle = title;
this.dialogVisible = true;
this.dialogVisibleType = "tabremove";
} else {
console.log(this.tdPicth);
function remove(ob, val) {
var ob = ob;
var val = val;
var index = ob.indexOf(val);
if (index > -1) {
ob.splice(index, 1);
}
return ob;
}
var tdPicth = this.tdPicth;
for (var j in tdPicth) {
console.log(j);
remove(this.tebleDate, this.tdPicth[j]);
// remove(this.tebleDateAll, this.tdPicth[j]);
}
this.tdPicth = [];
}
},
addTable() {
//添加 table
this.itemModel = this.addTableValue;
this.i = this.tebleDate.length;
this.tebleDate.push(this.addTableValue);
this.tebleDateAll.push(this.addTableValue)
this.thshow = true;
},
}
};
.table{
width:100%;
overflow-x: auto
}
th {
border: 1px solid #dcdfe6;
padding: 5px;
white-space: nowrap;
text-align: center;
box-sizing: border-box;
}
td {
white-space: nowrap;
text-align: center;
border-width: 1px;
border-style: solid;
border: 1px solid #dcdfe6;
border-image: initial;
padding: 5px;
overflow: hidden;
box-sizing: border-box;
}
.formtitle {
display: block;
width: 150px;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
text-overflow: ellipsis;
overflow: hidden;
}
.chestyle {
display: inline-block;
padding: 3px;
}
input {
display: inline-block;
max-width: 150px;
text-align: center;
border: 1px solid #dcdfe6;
padding: 5px;
}
table {
width: 200%;
display: block;
height: 430px;
overflow: auto;
cursor: default;
border-collapse:collapse
}
select {
display: inline-block;
height: 30px;
line-height: 30px;
text-align: center;
padding-left: 10px;
border: 1px solid #dcdfe6;
}
.excelBut{
position: absolute;bottom: 5px;right: 25%;
border: 0;background: #fff;width: 70px;
background: url("../../assets/images/export.png")no-repeat 10% 53%;
color: #606266;
}
.block{position: relative}
父元件
formData() { //計算屬性
//表單資料
return {
f1: { title: "xxxx", name: "" },
f2: { title: "xxxx", name: "" },
f3: { title: "xxx", name: "" },
f4: {
title: "xxxx",
name: "",
data: this.tablecategory
},
f5: {
title: "xxx",
name: "",
data: this.tableForm
},
f6: { title: "建立時間從：", name: "", time: { time1: "", time2: "" } }
};
},
tebleTop: [
// 表格标題資料
"xxx",
"xxxx",
"xxxx",
"xxx(小類)",
"xxxx(小類)",
"xxxx",
"xxx",
"xxxxx"
]
![vue可填寫表格_Vue.js實作可編輯的表格[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)