VUE框架CLI组件化动态列表实现------VUE框架

已于 2023-12-17 18:30:06 修改
阅读量1.1k 收藏 27
点赞数 35
分类专栏： # VUE框架 前端 文章标签： 前端 javascript ecmascript vue.js 前端框架 vue js
于 2023-12-06 15:40:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134833288
版权 

<template>
    <div>
        <BugHeader></BugHeader>
        <BugList></BugList>
        <BugFooter></BugFooter>
    </div>
</template>

<script>
import BugHeader from "./components/BugHeader.vue";
import BugList from "./components/BugList.vue";
import BugFooter from "./components/BugFooter.vue";
export default {
    name : "App",
    components : {BugHeader,BugList,BugFooter}
}
</script>

<style>
.button{
	display: inline-block inline;
	zoom: 1;
	padding: 6px 20px;
	margin: 0;
	cursor: pointer;
	border: 1px solid #bbb;
	overflow: visible;
	font: bold 13px arial, helvetica, sans-serif;
	text-decoration: none;
	white-space: nowrap;
	color: #555;
	background-color: #ddd;
	background-image: -webkit-gradient(linear, to right top, to right bottom, form(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -o-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	-webkit-transition: background-color .2s ease-out;
	-moz-transition: background-color .2s ease-out;
	-ms-transition: background-color .2s ease-out;
	-o-transition: background-color .2s ease-out;
	transition: background-color .2s ease-out;
	background-clip: padding-box; /* Fix bleeding */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	text-shadow: 0 1px 0 rgba(255,255,255, .9);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.button:active{
	background: #e9e9e9;
	position: relative;
	top: 1px;
	text-shadow: none;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.button.red{
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.2);
	background-image: -webkit-gradient(linear, to right top, to right bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -o-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
}
.button.red{
	background-color: #ca3535;
	border-color: #c43c35;
}
.button.red:hover{
	background-color: #ee5f5b;
}
.button.red:active{
	background: #c43c35;
}
.button.green{
	background-color: #57a957;
	border-color: #57a957;
}
.button.green:hover{
	background-color: #62c462;
}
.button.green:active{
	background: #57a957;
}
</style>

<template>

    <div>

        <BugHeader></BugHeader>

        <BugList></BugList>

        <BugFooter></BugFooter>

    </div>

</template>

<script>

import BugHeader from "./components/BugHeader.vue";

import BugList from "./components/BugList.vue";

import BugFooter from "./components/BugFooter.vue";

export default {

    name : "App",

    components : {BugHeader,BugList,BugFooter}

}

</script>

<style>

.button{

    display: inline-block inline;

    zoom: 1;

    padding: 6px 20px;

    margin: 0;

    cursor: pointer;

    border: 1px solid #bbb;

    overflow: visible;

    font: bold 13px arial, helvetica, sans-serif;

    text-decoration: none;

    white-space: nowrap;

    color: #555;

    background-color: #ddd;

    background-image: -webkit-gradient(linear, to right top, to right bottom, form(rgba(255,255,255,1)), to(rgba(255,255,255,0)));

    background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    background-image: -o-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    -webkit-transition: background-color .2s ease-out;

    -moz-transition: background-color .2s ease-out;

    -ms-transition: background-color .2s ease-out;

    -o-transition: background-color .2s ease-out;

    transition: background-color .2s ease-out;

    background-clip: padding-box; /* Fix bleeding */

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;

    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;

    box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;

    text-shadow: 0 1px 0 rgba(255,255,255, .9);

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}

.button:active{

    background: #e9e9e9;

    position: relative;

    top: 1px;

    text-shadow: none;

    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;

    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;

    box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;

}

.button.red{

    color: #fff;

    text-shadow: 0 1px 0 rgba(0,0,0,.2);

    background-image: -webkit-gradient(linear, to right top, to right bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));

    background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

    background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

    background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

    background-image: -o-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

    background-image: linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

}

.button.red{

    background-color: #ca3535;

    border-color: #c43c35;

}

.button.red:hover{

    background-color: #ee5f5b;

}

.button.red:active{

    background: #c43c35;

}

.button.green{

    background-color: #57a957;

    border-color: #57a957;

}

.button.green:hover{

    background-color: #62c462;

}

.button.green:active{

    background: #57a957;

}

</style>

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th class="c1">全选<input type="checkbox"/></th>
                    <th>bug描述</th>
                    <th class="c2"></th>
                </tr>
            </thead>
            <tbody>
                <BugItem v-for="bug in bugList" :key="bug.id" :bug="bug"></BugItem>
            </tbody>
        </table>
    </div>
</template>

<script>
import BugItem from "./BugItem.vue";
export default {
    name : "BugList",
    components : {BugItem},
    data(){
        return {
            bugList : [
                {id : 1,desc : "Bug描述信息1",resolved : true},
                {id : 2,desc : "Bug描述信息2",resolved : false},
                {id : 3,desc : "Bug描述信息3",resolved : true},
            ]
        }
    }
}
</script>

<style scoped>
/* list */
table{
	width: 760px;
	border-collapse: collapse;
}
table caption{
	font-size: 1em;
	font-weight: bold;
	margin: 1em 0;
}
.c1,.c2{
	width: 100px;
}
th {
	border: 1px solid #999;
	text-align: center;
	padding: 5px 0;
}
table thead tr{
	background-color: #008c8c;
	color: #fff;
}
</style>

<template>

    <div>

        <table>

            <thead>

                <tr>

                    <th class="c1">全选<input type="checkbox"/></th>

                    <th>bug描述</th>

                    <th class="c2"></th>

                </tr>

            </thead>

            <tbody>

                <BugItem v-for="bug in bugList" :key="bug.id" :bug="bug"></BugItem>

            </tbody>

        </table>

    </div>

</template>

<script>

import BugItem from "./BugItem.vue";

export default {

    name : "BugList",

    components : {BugItem},

    data(){

        return {

            bugList : [

                {id : 1,desc : "Bug描述信息1",resolved : true},

                {id : 2,desc : "Bug描述信息2",resolved : false},

                {id : 3,desc : "Bug描述信息3",resolved : true},

            ]

        }

    }

}

</script>

<style scoped>

/* list */

table{

    width: 760px;

    border-collapse: collapse;

}

table caption{

    font-size: 1em;

    font-weight: bold;

    margin: 1em 0;

}

.c1,.c2{

    width: 100px;

}

th {

    border: 1px solid #999;

    text-align: center;

    padding: 5px 0;

}

table thead tr{

    background-color: #008c8c;

    color: #fff;

}

</style>

<template>
    <tr>
            <td><input type="checkbox" :checked="bug.resolved"></td>
            <td>{{ bug.desc }}</td>
            <td><button class="samll red button">删除</button></td>
    </tr>
</template>

<script>
export default {
    name : "BugItem",
    props : ['bug']
}
</script>

<style scoped>
/* item */
table tbody tr:nth-child(odd){
	background-color: #eee;
}
table tbody tr:hover{
	background-color: #ccc;
}
table tbody tr td:first-child{
	color: #f40;
}
td{
	border: 1px solid #999;
	text-align: center;
	padding: 5px 0;
}
.desc {
    cursor: pointer;
}
</style>

<template>

    <tr>

            <td><input type="checkbox" :checked="bug.resolved"></td>

            <td>{{ bug.desc }}</td>

            <td><button class="samll red button">删除</button></td>

    </tr>

</template>

<script>

export default {

    name : "BugItem",

    props : ['bug']

}

</script>

<style scoped>

/* item */

table tbody tr:nth-child(odd){

    background-color: #eee;

}

table tbody tr:hover{

    background-color: #ccc;

}

table tbody tr td:first-child{

    color: #f40;

}

td{

    border: 1px solid #999;

    text-align: center;

    padding: 5px 0;

}

.desc {

    cursor: pointer;

}

</style>

<template>
    <div class="footer">
        <button @click="clean()" class="small red button">清除已解决</button>
        <h3>当前BUG总量{{ TNumber }}个,已解决{{ SNumber }}个</h3>
    </div>
</template>

<script>
export default {
    name : "BugFooter",
    data(){
        return {
            TNumber : 0,
            SNumber : 0
        }
    },
    methods : {
        clean(){

        }
    }
}
</script>

<style scoped>
/* footer */
.footer{
	margin-top: 10px;
}
.footer span{
	font-size: 12px;
}
</style>

<template>

    <div class="footer">

        <button @click="clean()" class="small red button">清除已解决</button>

        <h3>当前BUG总量{{ TNumber }}个,已解决{{ SNumber }}个</h3>

    </div>

</template>

<script>

export default {

    name : "BugFooter",

    data(){

        return {

            TNumber : 0,

            SNumber : 0

        }

    },

    methods : {

        clean(){

        }

    }

}

</script>

<style scoped>

/* footer */

.footer{

    margin-top: 10px;

}

.footer span{

    font-size: 12px;

}

</style>

<template>
    <div>
        <textarea cols="105" rows="4" v-model.lazy="info" placeholder="请输入BUG的描述信息"></textarea>
        <br>
        <button @click="submit()" class="small green button">保存</button>
    </div>
</template>

<script>
export default {
    name : "BugHeader",
    data(){
        return {
            info : ""
        }
    },
    methods : {
        submit()
        {

        }
    }
}
</script>

<style scoped>
/* header */
.header {
	margin-bottom: 20px;
	margin-top: 20px;
}
</style>

<template>

    <div>

        <textarea cols="105" rows="4" v-model.lazy="info" placeholder="请输入BUG的描述信息"></textarea>

        <br>

        <button @click="submit()" class="small green button">保存</button>

    </div>

</template>

<script>

export default {

    name : "BugHeader",

    data(){

        return {

            info : ""

        }

    },

    methods : {

        submit()

        {

        }

    }

}

</script>

<style scoped>

/* header */

.header {

    margin-bottom: 20px;

    margin-top: 20px;

}

</style>

旧约Alatus
关注
  • 35
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli开发的商城源代码
01-18
在这个"vue-cli开发的商城源代码"项目中，我们可以看到一系列与前端开发、Vue.js 框架以及构建电商平台相关的知识点。 首先，`vue.js` 是一个轻量级的前端框架，由尤雨溪开发，它的核心特性包括组件化、虚拟DOM、...
vue动态列表
weixin_43930529的博客
06-22 2196
使用vue写一个动态列表功能
Vue Table表格动态列 Table表格动态生成列
瘾丶病的博客
11-09 5258
vue Table表格动态设置列 Table表格动态生成列。
【vue 动态表格】
PanPink的博客
06-01 2651
vue+vuex实现动态表单，想显示哪列就显示哪列。
vue 实现全部动态列表展示（包括动态实现操作点击事件）
m0_60602436的博客
11-10 2832
将表格封装成为一个组件： <element-table ref="elementTable" :url="url" :params="searchParams" :columns="columns" v-model:currentPage="currentPage" @columnClick="columnClick" /> 引入： import ..
用vue做一个动态可添加列表效果
qq_44938644的博客
08-05 2022
用vue做一个动态可添加列表效果（持续更新中）
vue-cli监听组件加载完成的方法
10-18
本文将详细介绍如何在Vue CLI项目中监听组件加载完成。 首先，我们需要安装Vuex。在命令行中运行以下命令： ```bash npm install vuex --save ``` 安装完成后，在项目的根目录下创建或找到`store.js`文件，用于...
Vue-cli3项目引入Typescript的实现方法
10-16
然后，在项目根目录下初始化Vue-cli3项目： ```bash vue create my-project ``` 进入项目目录并安装TypeScript及其Vue CLI的TypeScript插件： ```bash cd my-project npm install --save-dev typescript @vue/cli...
使用vue-cli脚手架工具搭建vue-webpack项目
12-10
为了解决这个问题，Vue 官方提供了 `vue-cli` 这个脚手架工具，它可以帮助开发者快速地生成一个包含所有必需配置的项目模板。 1. **安装Node.js环境**： 在搭建Vue项目之前，首先确保你的计算机上安装了Node.js。...
vue-cli脚手架的.babelrc文件用法说明
10-14
在 Vue CLI 3.x 项目中，如果你使用 Element UI 并想要减少打包后的体积，可以实现按需加载组件。以下是实现步骤： 1. 安装插件 `babel-plugin-component`：`npm i babel-plugin-component -D` 2. 配置 `babel....
Vue 实现列表动态添加和删除的两种方法小结
12-29
下面将介绍两种方式实现动态添加和删除列表 1.不使用组件 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Vue 测试实例 - vue实现列表增加和删除</title> [removed][removed] </head> <body> <input v-model=newAddText placeholder=请输入要添加的内容 /> <button @click='addNew
vue 动态添加 HTML元素
06-13
如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。 如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。
动态列表切换
06-26
ListView与GridView相互切换，ListView与GridView相互切换
动态显示列表
12-19
列表随手指拖动，但固定位置始终保持动态变化
VUE element-ui实现表格动态展示、动态删减列、动态排序、动态搜索条件配置、表单组件化。
最新发布
askuld的博客
01-11 1204
2、本组件支持列表列排序，vuedraggable是拖拽插件，上图中字段管理里的拖拽效果 ，需要的话请自行npm install。1、本组件支持列表的表头自定义配置，checkbox实现。3、本组件支持查询条件动态配置，穿梭框实现。
vue 动态表单添加，让你的网站更具交互性
热门推荐
Shids_的博客
03-25 1万+
vue 动态表单添加，让你的网站更具交互性
vue+element 封装动态选择列表界面
⑧o年崋日常记录
01-08 2020
查询条件及列表都是动态配置 界面: 使用: <el-input v-model="name" readonly class="input-with-select"> <el-button slot="append" icon="el-icon-do...
Vue+elementUI 动态展示列表的数据
吴小花的博客
03-09 5440
需求描述：活动查看的时候，根据后台返回的数据，动态渲染列和每行数据。 后台返回的数据结构如下 html <!-- 弹出的查看数据 --> <el-dialog width="1200px" :title="activityName" :visible.sync="viewDataPopUp" > <div class="export"> <el-button
vue-cli3项目搭建与优化全攻略
"vue-cli3 从搭建到优化的详细步骤" 在本文中，我们将深入探讨如何使用vue-cli3从零开始搭建一个Vue.js项目，并逐步对其进行优化。Vue CLI 3 是 Vue.js 官方提供的一个命令行工具，它极大地简化了 Vue 项目的初始化...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值