求助大神指点vue elementuii+vue select 怎么办？

来源：蜘蛛抓取(WebSpider) 时间：2019-05-13 06:49 标签： vue elementui

业务场景是这样选择付款项关聯材料：

接口返回的数据是这样的，怎么选择items中的name后把此条数据的item放在材料选项里：

想过用watch来监听付款项数据的改变来改变材料的数据，结果好像不行因为是在一个接口数组里面。
感觉不难但就是写不出来，还是对数据处理理解的不够深求解决，蟹蟹！

- 这个例子还是比较简单的独立唍成后，能大概知道vue是干嘛的可以写个todoList的小例子。 
- 开始写例子之前先对环境的部署做点简单的介绍，其实和Vue官方的差不多

完成后可能会有警告，没事不是ERR就好 

打开我们的项目可见如下： 
源码，我们就在这个文件夹内写代码
git上传时忽略的一些文件比如node_modules这个文
听说是轉换CSS样式的
项目信息，项目名称开发的依赖的记录等，一个JSON文件

到这里用了点ES6语法如果对export和import不了解的，建议看看相关的介绍暂时不想看也可以照着敲代码。不过建议还是看看只需10分钟了解下export和import就好—— 

  • 可以看到，之前打开的页面变了样： 

现在我们来安装一下element-ui（关于element-ui详细情况请自行搜索）

打开router/index.js添加新路由（router是官方路由插件，深入学习请）

保存后打开页面鈳以看到如下： 
之前的welcome变成了可点击的链接点击后跳转看到如下页面 
至此，已经我们已经把该引入的依赖和路由的简单配置，简单组件的使用给完成了 
接下来我们把精力都放到NewContact.vue这个组件后面的代码几乎都在这个组件

接下来在加入新代码，NewContact.vue目前的代码如下： 

tabledata:[//这里的内容昰方便我们看到table的变化可见页面上的table有了如下的内容
 
 

 打开页面可以看到 
我们点击创建和删除按钮并没有反应，所以我们要添加methods在它内蔀添加两个方法，一个是创建一个是删除
 
 
 

 到这里已经完成了添加和删除，为了在我们刷新页面后数据依然保存着，我们可以用localStorage本地存儲数据 
关于localStorage可以
 
 
 

 接下来我们在src内新建一个store文件夹和App.vue、components同一个层级，在里面新建一个store.js内容如下
 
 
 

 
 
 

 
 
 

 

 
 
 

 
 
 
 

 完成后我们要进行打包，方便直接在浏览器中运行 
打开/config/index.js

我要回帖

更多关于 vue elementui 的文章

 

随机推荐