vue 可编辑表格组件
<template><div class="table">
<table border="1px" v-dragform>
<!-- 表格标题 -->
<thead>
<tr >
<th> </th>
<th><input type="checkbox" v-if="checkboxs" v-model=\'checked\' v-on:click=\'checkedAll\' class="chestyle"></th>
<th v-for="(item,key) in tebleTop" :key="key"><span class="formtitle" :title="item">{{item}}</span></th>
</tr>
</thead>
<!-- 表格内容 -->
<tbody>
<tr v-for="(item1 ,key1) in tebleDate" :key="key1" @dblclick.stop="tableEdit(key1,item1)">
<td>{{key1+1}}</td>
<td><input type="checkbox" v-if="checkboxs" :value="item1" v-model="tdPicth" class="chestyle"></td>
<td v-for="(item2 ,key2) in tebleDate[key1]" :key="key2" >
<span v-if="key1==i && Editchent? !thshow:true" class="formtitle" :title="item2.title">{{(item2.title?item2.title:\'\')}}</span>
<span v-if="key1==i&& Editchent ? thshow:false" >
<input type="text" v-model="itemModel[key2].title" v-if="(item2.data==null)&&(item2.time==null)">
<select v-model="item2.title " v-if="item2.data" @change ="dbselect(item2)">
<option :value= item3.value?item3.value:item3.prodCode v-for="(item3,key3) in item2.data" :key="key3">{{item3.text?item3.text:item3.prodName}}</option>
</select>
<input type="date" v-model="itemModel[key2].title" v-if="item2.time!=null">
</span>
</td>
</tr>
</tbody>
</table>
<div class="block">
<el-pagination
@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>
</el-pagination>
<button @click="export2Excelshow=true" class="excelBut"><i></i>导出</button>
<export2Excel v-if="export2Excelshow" @closeExce = "export2Excelshow=false" :tebleDateAll= "tebleDateAll" :tebleDate= "tebleDate" :tebleTop="tebleTop"></export2Excel>
</div>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
>
<span>{{dialogVisibleTitle}}</span>
<span slot="footer" class="dialog-footer">
<el-button @click="tabremoveBut(false)">取 消</el-button>
<el-button type="primary" @click="tabremoveBut(true)">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
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;
},
}
};
</script>
<style scoped>
.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;
}
/* .excelBut i{width: 14px;height: 14px;display: inline-block;background: url("../../assets/images/export.png")no-repeat;} */
.block{position: relative}
</style>
父组件
<tables slot ref="tablesValue" :tebleDateAll = "tebleDateAll" :Editchent= true :dbselectShow= true :addTableValue= "addTableValue" :tebleTop = "tebleTop" ></tables>
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 可编辑表格组件 的全部内容， 来源链接： utcz.com/z/376382.html
