主要功能 :
1,一个表格,单元格内容是循环渲染的,点击每个单元格弹出一个输入框,编辑内容
刚开始想用插件写的,网上找了半天, 研究好久搞不出来需要的效果 ,最后还是自己用table标签手写实现的
<template>
<div>
<table class="tb1">
<tr class="th">
<td></td>
<td>工作事项</td>
<td>工作内容</td>
<td>备注</td>
</tr>
<tr v-for="(item,index) in list" :key="index">
<td @click="del(index)">{{index+1}}</td>
<td>
<input type="text" v-model="item.item" @click="modifyItem(item,index)">
</td>
<td>
<input type="text" v-model="item.content" @click="modifyContent(item,index)">
</td>
<td>
<input type="text" v-model="item.remark" @click="modifyRemark(item,index)">
</td>
</tr>
</table>
<van-button type="info" size="small" @click="addRow" class="addBtn" v-if="this.$store.state.isHeadShow">+ 添加行
(点序号删除行)
</van-button>
<van-button type="info" size="small" class="btn" @click="submit" >提交
</van-button>
<!-- 编辑工作事项 -->
<van-popup v-model="isItemShow" position="bottom" :style="{ height: '65%' }">
<van-nav-bar title="工作事项" left-arrow @click-left="isItemShow=false" right-text="确定" @click-right="confirmItem" />
<van-field v-model="itemTxt" rows="10" autosize type="textarea" placeholder="输入工作事项" :readonly="readonly" />
</van-popup>
<!-- 编辑工作内容 -->
<van-popup v-model="isContentShow" position="bottom" :style="{ height: '65%' }">
<van-nav-bar title="工作内容" left-arrow @click-left="isContentShow=false" right-text="确定" @click-right="confirmContent" />
<van-field v-model="contentTxt" rows="10" autosize type="textarea" placeholder="输入工作内容"
:readonly="readonly" />
</van-popup>
<!-- 编辑备注 -->
<van-popup v-model="isRemarkShow" position="bottom" :style="{ height: '65%' }">
<van-nav-bar title="备注" left-arrow @click-left="isRemarkShow=false" right-text="确定" @click-right="confirmRemark" />
<van-field v-model="remarkTxt" rows="10" autosize type="textarea" placeholder="输入备注" :readonly="readonly" />
</van-popup>
</div>
</template>
<script>
export default {
data() {
return {
index: "",list: [{
item: "",content: "",remark: ""
},{
item: "",remark: ""
}],isItemShow: false,itemTxt: "",isContentShow: false,contentTxt: "",isRemarkShow: false,remarkTxt: "",}
},methods: {
// 添加行
addRow() {
this.list.push({})
},// 删除行
del(index) {
this.list.splice(index,1)
},// 编辑工作内容
modifyContent(val,index) {
console.log(val);
this.isContentShow = true;
this.contentTxt = val.content;
this.index = index
},// 编辑工作事项
modifyItem(val,index) {
this.isItemShow = true;
this.itemTxt = val.item;
this.index = index
},//编辑备注
modifyRemark(val,index) {
this.isRemarkShow = true;
this.remarkTxt = val.remark;
this.index = index
},confirmItem() {
this.list[this.index].item = this.itemTxt;
this.isItemShow = false;
},confirmContent() {
this.list[this.index].content = this.contentTxt;
this.isContentShow = false;
},confirmRemark() {
this.list[this.index].remark = this.remarkTxt;
this.isRemarkShow = false
}
}
}
</script>
<style lang="scss" scoped>
.tb1 {
width: 95%;
margin: auto;
margin-top: 0.5rem;
text-align: center;
td {
font-size: 0.21rem;
}
td:nth-child(1) {
width: 0.67rem;
}
input {
width: 100%;
border: none;
outline: none;
}
.th {
background-color: #f3f6fd;
}
}
/deep/ .van-nav-bar__text {
color: white;
}
.btn {
position: absolute;
right: 0.5rem;
margin-top: 1rem;
}
.addBtn {
position: absolute;
left: 0.5rem;
margin-top: 1.1rem;
}
</style>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。