哪个网站可以学做包子,电子商务网站的建设开发工具,中诺建设集团有限公司网站,跨境电商多平台运营共下面5点1.新增一个显示和隐藏的参数2.在显示那边新增一个input框#xff0c;用v-model绑定数据#xff0c;用v-if来显示和隐藏3.给之前的显示的span标签添加v-else 和上面形成if else4.编辑和保存按钮同理#xff0c;然后编辑按钮触发的任务将所有输入打开。即seen置为tru… 共下面5点 1.新增一个显示和隐藏的参数 2.在显示那边新增一个input框用v-model绑定数据用v-if来显示和隐藏 3.给之前的显示的span标签添加v-else 和上面形成if else 4.编辑和保存按钮同理然后编辑按钮触发的任务将所有输入打开。即seen置为true 5.保存按钮同理保存按钮触发的任务将所有输入关闭。即seen置为false,并触发提交post数据 -- 效果图 代码 templatedivh2新闻页面/h2hrdiv classtablebefordivel-table :dataliststylewidth: 100%el-table-columnlabel标题width180template slot-scopescopei classel-icon-s-ticket/iel-input v-modelscope.row.title v-ifscope.row.seen/el-inputspan stylemargin-left: 10px v-else{{ scope.row.title }}/span/template/el-table-columnel-table-columnlabel姓名width180template slot-scopescope!-- el-popover triggerhover placementtopp作者: {{ scope.row.username }}/pp住址: {{ scope.row.pic }}/p --div slotreference classname-wrapperi classel-icon-s-home/i!-- 1.新增一个显示和隐藏的参数2.在显示那边新增一个input框用v-model绑定数据用v-if来显示和隐藏3.给之前的显示的span标签添加v-else 和上面形成if else4.编辑和保存按钮同理然后编辑按钮触发的任务将所有输入打开。即seen置为true5.保存按钮同理保存按钮触发的任务将所有输入关闭。即seen置为false,并触发提交post数据 --!-- #2 #3 --el-input v-modelscope.row.username v-ifscope.row.seen/el-input el-tag sizemedium v-else{{ scope.row.username }}/el-tag/div!-- /el-popover --/template/el-table-columnel-table-columnlabel时间width180template slot-scopescopei classel-icon-time/iel-input v-modelscope.row.dateline v-ifscope.row.seen/el-inputspan stylemargin-left: 10px v-else{{ scope.row.dateline }}/span/template/el-table-columnel-table-column label操作template slot-scopescope!-- #4 #5 --el-buttonsizeminitypedangerclickhandleSave(scope.$index, scope.row) v-ifscope.row.seen保存/el-buttonel-buttonsizeminiclickhandleEdit(scope.$index, scope.row) v-else编辑/el-button/template/el-table-column/el-table/div!-- ul classlistli v-for(item,index) in list router-link :to/content/item.aid{{index}}.{{item.title}}/router-link/li/ul --!-- ul classlistv-infinite-scrollloadMoreinfinite-scroll-disabledloadinginfinite-scroll-distance10li v-foritem in listrouter-link :to/content/item.aid{{item.title}}/router-link/li
/ul --/div
/templatescript
import storage from ../model/storage.js
export default {data(){return{list:[],newlist:[],loading:false,page:1}},mounted() {console.log(mounted!!);var pagestorage.get(News_page);var liststorage.get(News_list);if(page){this.pagepage};if(list){this.listlist};this.getNewJsonData();this.listtonewlist();},updated() { console.log(updated!!); storage.set(News_list,this.list);storage.set(News_page,this.page);},methods:{//#1 新增参数listtonewlist(){this.newlist this.list.map(item {item.seenfalse;return item;})console.log(this.newlist)},//#4 #5handleEdit(index, row) {row.seentrue;console.log(index, row);},handleSave(index, row) {console.log(row);row.seenfalse;console.log(index, row);// **1 提交 获取row的值传给post函数this.postEditData(row);},//1.请求数据loadMore() {console.log(this.page);console.log(this.list);this.getNewJsonData();},postEditData(row){// **2 拼凑连接格式上传的值 const apihttp://www.phonegap100.com/xxxx/row.aid;const data {username: row.username,title: row.title,dateline: row.username};console.log(api,data,row)// **3上传// this.$http.post(api,data).then((response) {},(error) {})},getNewJsonData(){this.loadingtrue;var apihttp://www.phonegap100.com/appapi.php?agetPortalListcatid20pagethis.page;this.$http.jsonp(api).then((response){console.log(this.list)if (response.body.result.length20){this.loadingtrue;}else{this.listthis.list.concat(response.body.result);this.page;this.loadingfalse;}console.log(response);},(error){console.log(error);})},},beforeUpdate() { console.log(beforeUpdate!!); },beforeDestroy() { console.log(beforeDestroy!!); },destroyed() { console.log(destroyed!!); },beforeCreate() { console.log(beforeCreate!!); },created() { console.log(created!!); },beforeMount() { console.log(beforeMount!!); },}
/script
style langscss scoped
.list{li{height: 3.4rem;line-height: 3.4rem;border-bottom: 1px solid #eee;font-size: 1.6rem;a{color:#666;}}.tabledefodiv{margin: 0 auto;width: 1400px;}
}
/style转载于:https://www.cnblogs.com/a10086/p/11355627.html
