vue结合element-ui做简单版todolist

最新推荐文章于 2022-07-06 20:32:26 发布

「已注销」

最新推荐文章于 2022-07-06 20:32:26 发布

阅读量1.6k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/clear_code/article/details/101621535

版权

本文介绍如何将Vue与Element-UI结合，通过npm安装并引入Element-UI，实现一个基础的TodoList应用。虽然样式简单，但核心功能已经实现。

摘要由CSDN通过智能技术生成

结合element-ui首先需要npm安装element-ui

npm i element-ui -S；

然后在入口文件中引入；

　import ElementUI from 'element-ui';
　import 'element-ui/lib/theme-chalk/index.css';
　Vue.use(ElementUI);

这样就可以使用element-ui了，如果不用可以忽略这一步；

由于代码中有详细注释
效果如下：（样式没有写，比较丑，见谅哈）
在这里插入图片描述

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue+element-ui 实现todoList(增删改查)

qq_48930299的博客

06-08

716

<template> <div> <el-input placeholder="请输入内容" v-model="input" @change="submit" style="width: 200px; margin: 20px 0px" > <!-- <template #suffix> <div class="icon"> .

Vue实现todolist

07-13

利用vue框架，实现todolist MVC DEMO，基本实现必备功能，其中使用到了element-ui

参与评论您还未登录，请先登录后发表或查看评论

element-ui 列表

fengyiyangdeli的博客

05-11

3378

<template> <div class="yys"> <div class="yys-flex-between" style="margin-top: 30px; margin-bottom: 25px;display:flex;"> <div> <el-radio-group v-model="parm.cardStatus" class="oddorseveral"> .

Vue element-ui 实现单选列表

applebomb的专栏

05-16

6792

工作太忙，好久没打点，来点原创浇浇水，要不博客真的长草了。。。 element-ui组件强大，但是使用时发现少了一个最常见的组件：单选列表。我的概念中的列表框是这样的（从桌面开发带来的习惯-_-）或者是穿梭框的左半边但是这么基础的东西，element-ui 竟（懒）然（得）没（做）有（啊）！初学的同学可能想到拿table来弄了，但是table这个重量级。。加上一堆点...

Vue element-UI多选框列表组件

weixin_47121557的博客

08-11

1567

<template> <div class="receiverbox"> <div class="el-transfer receiver"> <div class="el-transfer-panel" rightdefaultchecked value targetorder="original"> <p class="el-transfer-panel__header"> <.

vue3.0引入element-ui（标准版）

qq_37698249的博客

01-02

1164

vue3.0引入element-ui（标准版） Element-ui兼容3.0官网文档： https://element-plus.gitee.io/#/zh-CN/component/quickstart 1.通过vuecli搭建3.0vue项目 2.npm i element-plus 一. main.js： import { createApp } from "vue"; // ********** 引入elementui 关键两句************** // import Eleme

vue-element-admin源码解读——项目组件布局及状态管理

星留影的刹那间

06-10

4486

vue-element-admin作为一款优秀的前端解决方案，整个框架的结构非常清晰，同时利用Vuex和Vue Router来实现SPA(单页面应用)开发模式，只需要简单的编写组件和配置文件即可完成项目的初步搭建，这对某些需要简单的前端界面的团队无疑是个福利。不过对于需要高度自定义的公司可能还需要更加深入的了解一下，所以这篇文章将带你一步步的摸索整个项目的组件是如何加载的。基础页面要摸索当然首先就要找到入口，对于界面而言当然就是index.html的作为入口了。 public\index.html &l

Vue TodoList完整案例

09-05

案例根据 http://todomvc.com/examples/vue/ 编写完成功能：完成了所有的功能，如：添加、双击修改、ESC键取消编辑、清除所有已完成任务、一键全选任务、自动聚焦，本地保存等等。

Vue+elementUI 实现动态增删List成员模块.vue

08-13

Vue+elementUI 实现动态增删List成员模块，优化增删逻辑，简介代码复制即用

Vue Element UI 自定义描述列表组件

Jerry的博客

05-12

8721

效果图写在前面写后台管理经常从列表点击查看详情，展示数据信息，Element UI虽然有表格组件，但是描述组件并没有，之前团队的成员遇到这种情况都自己去写样式，写起来也麻烦，而且每个人写出来的样式也不统一，破坏了项目的整体风格。像是Ant Design UI就有描述组件，用起来特别舒服，所以索性自己结合Element UI的el-row和el-col自己写了一个。实现哪些功能 1、每行的高度根据改行中某一列的最大高度自动撑开 2、列宽度自动补全，避免最后一列出现残缺的情况 3、支持纯文本与HTML

基于Vue.js的element UI中实现todolist

changan2018的博客

07-06

831

基于Vue.js在element UI中选择输入框实现todolist

element ui 前台模板_element-ui 菜单模板封装（递归）

weixin_39873208的博客

12-19

1229

1.使用vue-cli后src路径找个文件夹创建menu.vue;注意：1.数据需要通过父页面传递进来，在模板中会造成数据溢出模板需要有name属性，调用模板的父页面的组件名称和模板name需一致，才能实现递归。//menu.vue; //循环数据；数据menuList通过props传递{{ list.resourceName}} //当有子集数据再次使用这个模板，:menuList通过prop...

element-ui封装---tableList

weixin_34250434的博客

06-10

982

2019独角兽企业重金招聘Python工程师标准>>> ...

elementUI tableList封装

weixin_50821114的博客

10-25

一般来说 elementUI的table其实没有必要封装了，因为别人已经写好了，自己只需要使用即可，但是有时候，为了自己方便，我认为还是可以二次封装一下的 1.封装一个包含所有情况的一个tableList 利用elementUi已经封好的代码情况囊括进去，将表头用统一的数组对象来循环展示 <template> <div style="height:100%;"> <el-table :data="tableData" :stripe=

使用element UI 快速制作一个列表页面

热门推荐

马优晨

10-30

3万+

使用element制作一个列表页面，并且当点击“查看调查问卷”时弹出弹框。 1. 制作一个名叫DataListTable &amp;amp;lt;DataListTable v-show=&amp;quot;showTable&amp;quot; :list=&amp;quot;list&amp;quot; :total-num=&amp;quot;totalNum&

Element UI自定义描述列表组件

Allen_kai_hui的博客

02-25

4847

功能 1、每行的高度根据改行中某一列的最大高度自动撑开2、列宽度自动补全，避免最后一列出现残缺的情况 3、支持纯文本与HTML插槽 4、支持每行几列的设置 5、支持每列宽度自定义6、支持动态数据重绘组件设计 1、使用父子组件嵌套实现，父组件为 e-desc, 子组件为 e-desc-item 。 2、e-desc-item传递props的label 和插槽的value，使用插槽$slots.content来显示DOM 3、利用 el-row 和 el-col 来实现整体组件布局封装e-des.

elementui 展示列表模板_二、vue＋ElementUI开发后台管理模板—布局

weixin_33423874的博客

01-26

2030

0、写在前面关于布局：我们常见的后台管理页面结构一般有下图中显示的三种，如果把Tabs(导航的多标签显示)、Crumbs(面包屑)、Content(页面内容)和Footer(底部)当做中间区域视为一块整体，可以看到主要的区别就是Menu(菜单栏)位置的区别，待会我们就根据这些来设立vuex(vuex官网)的布局状态值，主要考虑以下两点：(1)菜单栏的位置；(2)设置是否需要该模块，包括Tabs、C...

vue-element-admin：基于vue和element-ui的高效后台框架

8. **基础模板vue-admin-template**：作为vue-element-admin的简化版，vue-admin-template更适合小型项目或快速原型开发，它同样基于Vue和Element-UI，但可能包含更少的预配置功能。 9. **持续更新与社区支持**：...