vue2.x+elelmentUI@3.5 表格

最新推荐文章于 2024-05-22 11:23:12 发布
最新推荐文章于 2024-05-22 11:23:12 发布
阅读量106 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/TBNICE/p/9054185.html
版权 
<template>
    <section>
        <el-row>
            <el-col :span="16">
                <!--表单-->
                <h3>{{setedList.length}}</h3>
                <table cellspacing="0" style="width:100%;" class="table-my">
                    <thead>
                        <tr>
                            <th>
                                <el-checkbox v-model="checkedAll" @change="handleCheckedAll">序号</el-checkbox>
                            </th>
                            <th>日期</th>
                            <th>姓名</th>
                            <th>地址</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,number) in tableData" :key="number" :class="{checked:item.checked}">
                            <td>
                                <el-checkbox v-model="item.checked" @change="handleChecked(item)">
                                    {{number+1}}
                                </el-checkbox>

                            </td>
                            <td>{{item.date}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.address}}</td>
                        </tr>

                    </tbody>
                </table>

                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="5" layout="prev, pager, next, jumper" :total="17">
                    </el-pagination>
                </div>
            </el-col>
            <el-col :span="8">
                <ul style="background:#eee;">
                    <!-- <li v-for="(e,i) in setedList" :key="i"></li> -->
                    <li v-for="(e,i) in setedList" :key="i" style="heighet:90px;background:skyblue;border:1px solid red">
                        <p>{{i+1}}</p>
                        <p style="padding:5px;"><input type="text" v-model="e.name" style="padding:5px;"></p>
                        <p style="padding:5px;"><input type="text" v-model="e.address" style="padding:5px;"></p>
                        <p style="padding:5px;"><input type="text" v-model="e.date" style="padding:5px;"></p>
                    </li>
                </ul>
            </el-col>
        </el-row>
    </section>
</template>
<script type="text/ecmascript-6">
const ERR_OK = "000";
export default {
    data() {
        return {
            checkedAll: false,
            checked: false,
            formInline: {
                user: {
                    name: '',
                    date: '',
                    address: [],
                    place: ''
                }
            },
            tableData: [],
            options: [],
            places: [],
            dialogFormVisible: false,
            editLoading: false,
            form: {
                name: '',
                address: '',
                date: '',
            },
            currentPage: 1,
            table_index: 999,
            setedList: [],
            list: []
        };
    },
    created() {
        this.$http.get('/api/getTable').then((response) => {
            response = response.data;
            if (response.code === ERR_OK) {
                //   this.tableData = response.datas;
                var datas = response.datas;

                for (var index = 0; index < datas.length; index++) {

                    datas[index].checked = false;
                    //   console.log(datas[index].checked)
                }
                this.tableData = datas;

            }
        });
        this.$http.get('/api/getOptions').then((response) => {
            response = response.data;
            if (response.code === ERR_OK) {
                this.options = response.datas;
                this.places = response.places;
            }
        });
    },
    methods: {

        handleCheckedAll() {//-----------全选
            var temp = []
            if (this.checkedAll) {
                this.list = [];
                for (var i = 0; i < this.tableData.length; i++) {
                    this.tableData[i].checked = true;
                    temp.push(this.tableData[i]);
                }
                this.list = temp;
                for (var j = 0; j < temp.length; j++) {
                    for (var k = 0; k < this.setedList.length; k++) {
                        if (temp[j].name == this.setedList[k].name) {
                            temp.splice(j, 1)
                        }
                    }

                }
                for (var l = 0; l < temp.length; l++) {
                    this.setedList.push(temp[l]);
                }

            } else {
                this.list = [];
                for (var i = 0; i < this.tableData.length; i++) {
                    this.tableData[i].checked = false;
                    temp.push(this.tableData[i]);
                }
                for (var j = 0; j < temp.length; j++) {
                    for (var k = 0; k < this.setedList.length; k++) {
                        if (temp[j].name == this.setedList[k].name) {
                            this.setedList.splice(k, 1)
                        }
                    }

                }
            }

        },
        handleChecked(item) {//单选--------------
            if (item.checked) {
                item.checked = true;
                this.setedList.push(item);
            } else {
                item.checked = false;
                if (this.list.length < 2) {
                    this.list = [];
                    for (var j = 0; j < this.setedList.length; j++) {
                        if (item.name == this.setedList[j].name) {
                            this.setedList.splice(j, 1)
                        }
                    }

                } else {

                    for (var j = 0; j < this.setedList.length; j++) {
                        if (item.name == this.setedList[j].name) {
                            this.setedList.splice(j, 1)
                        }
                    }

                }
            }

        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            console.log(`当前页: ${val}`);
            this.checkedAll = false;
            console.log(this.list);
            this.$http.get('/api/getTable').then((response) => {
                response = response.data;
                if (response.code === ERR_OK) {
                    var datas = response.datas;
                    for (var index = 0; index < datas.length; index++) {

                        datas[index].checked = false;

                    }
                    this.tableData = datas;

                }
            });
        },


    }
};
</script>
<style lang="less" scoped>
.table-my {
    border-collapse: collapse;
    margin: 0 auto;
    width: 500px;
    th,
    td {
        padding: 0;
        border: 1px solid #c0c4cc;
        font: 20px/50px "微软雅黑";
        text-align: center;
    }
    .checked{
        background: skyblue;
    }
}
</style>

 

< template>
< section >
< el-row >
< el-col :span= " 16 " >
<!--表单-->
< h3 >{{ setedList. length}} </ h3 >
< table cellspacing = " 0 " style = " width:100%; " class = " table-my " >
< thead >
< tr >
< th >
< el-checkbox v-model= " checkedAll " @change= " handleCheckedAll " >序号 </ el-checkbox >
</ th >
< th >日期 </ th >
< th >姓名 </ th >
< th >地址 </ th >
</ tr >
</ thead >
< tbody >
< tr v-for= " ( item , number ) in tableData " :key= " number " :class= " { checked : item . checked } " >
< td >
< el-checkbox v-model= " item . checked " @change= " handleChecked ( item ) " >
{{ number + 1}}
</ el-checkbox >

</ td >
< td >{{ item. date}} </ td >
< td >{{ item. name}} </ td >
< td >{{ item. address}} </ td >
</ tr >

</ tbody >
</ table >

< div class = " block " >
< el-pagination @size-change= " handleSizeChange " @current-change= " handleCurrentChange " :current-page= " currentPage " :page-size= " 5 " layout = " prev, pager, next, jumper " :total= " 17 " >
</ el-pagination >
</ div >
</ el-col >
< el-col :span= " 8 " >
< ul style = " background:#eee; " >
<!-- <li v-for="(e,i) in setedList" :key="i"></li> -->
< li v-for= " ( e , i ) in setedList " :key= " i " style = " heighet:90px;background:skyblue;border:1px solid red " >
< p >{{ i + 1}} </ p >
< p style = " padding:5px; " >< input type = " text " v-model= " e . name " style = " padding:5px; " ></ p >
< p style = " padding:5px; " >< input type = " text " v-model= " e . address " style = " padding:5px; " ></ p >
< p style = " padding:5px; " >< input type = " text " v-model= " e . date " style = " padding:5px; " ></ p >
</ li >
</ ul >
</ el-col >
</ el-row >
</ section >
</ template>
< script type= " text/ecmascript-6 ">
const ERR_OK = " 000 ";
export default {
data() {
return {
checkedAll: false,
checked: false,
formInline: {
user: {
name: '',
date: '',
address: [],
place: ''
}
},
tableData: [],
options: [],
places: [],
dialogFormVisible: false,
editLoading: false,
form: {
name: '',
address: '',
date: '',
},
currentPage: 1,
table_index: 999,
setedList: [],
list: []
};
},
created() {
this. $http. get( ' /api/getTable '). then(( response) => {
response = response. data;
if ( response. code === ERR_OK) {
// this.tableData = response.datas;
var datas = response. datas;

for ( var index = 0; index < datas. length; index ++) {

datas[ index]. checked = false;
// console.log(datas[index].checked)
}
this. tableData = datas;

}
});
this. $http. get( ' /api/getOptions '). then(( response) => {
response = response. data;
if ( response. code === ERR_OK) {
this. options = response. datas;
this. places = response. places;
}
});
},
methods: {

handleCheckedAll() { // -----------全选
var temp = []
if ( this. checkedAll) {
this. list = [];
for ( var i = 0; i < this. tableData. length; i ++) {
this. tableData[ i]. checked = true;
temp. push( this. tableData[ i]);
}
this. list = temp;
for ( var j = 0; j < temp. length; j ++) {
for ( var k = 0; k < this. setedList. length; k ++) {
if ( temp[ j]. name == this. setedList[ k]. name) {
temp. splice( j, 1)
}
}

}
for ( var l = 0; l < temp. length; l ++) {
this. setedList. push( temp[ l]);
}

} else {
this. list = [];
for ( var i = 0; i < this. tableData. length; i ++) {
this. tableData[ i]. checked = false;
temp. push( this. tableData[ i]);
}
for ( var j = 0; j < temp. length; j ++) {
for ( var k = 0; k < this. setedList. length; k ++) {
if ( temp[ j]. name == this. setedList[ k]. name) {
this. setedList. splice( k, 1)
}
}

}
}

},
handleChecked( item) { // 单选--------------
if ( item. checked) {
item. checked = true;
this. setedList. push( item);
} else {
item. checked = false;
if ( this. list. length < 2) {
this. list = [];
for ( var j = 0; j < this. setedList. length; j ++) {
if ( item. name == this. setedList[ j]. name) {
this. setedList. splice( j, 1)
}
}

} else {

for ( var j = 0; j < this. setedList. length; j ++) {
if ( item. name == this. setedList[ j]. name) {
this. setedList. splice( j, 1)
}
}

}
}

},
handleSizeChange( val) {
console. log( `每页 ${ val } 条`);
},
handleCurrentChange( val) {
this. currentPage = val;
console. log( `当前页: ${ val } `);
this. checkedAll = false;
console. log( this. list);
this. $http. get( ' /api/getTable '). then(( response) => {
response = response. data;
if ( response. code === ERR_OK) {
var datas = response. datas;
for ( var index = 0; index < datas. length; index ++) {

datas[ index]. checked = false;

}
this. tableData = datas;

}
});
},


}
};
</ script>
< style lang= " less " scoped>
.table-my {
border-collapse: collapse;
margin: 0 auto;
width: 500px;
th ,
td {
padding: 0;
border: 1px solid #c0c4cc;
font: 20px/50px " 微软雅黑 ";
text-align: center;
}
.checked{
background: skyblue;
}
}
</ style>

转载于:https://www.cnblogs.com/TBNICE/p/9054185.html

diaopa4156
关注
使用 vue2.x + ElementUI 快速搭建一个后台 增删改查 管理界面
IT小村
02-01 6万+
一、前言 CRUD 自从使用了 vue2.0，就不想过多地去使用其他的含 JS 代码的前端框架如 BootStrap4、jQuery 等，想全程使用 vue 去搭建前端界面，因为 vue 的生态系统十分繁荣，ui 方面的库有 element-ui、iview 等。 这次①使用了vue搭建前端页面架构，绑定数据，②使用element-ui修饰界面。 二、搭建项目架构 具体可以去看之前的...
vue全家桶（vue2.x+vue-router+axios+webpack）项目搭建
我在等风也等你的博客
01-09 3225
参考博客文章 博主FungLeo的Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版 注：原博主写的非常详细 本文章为根据原博主教程总结的自己的搭建流程一、安装node环境二、使用node -v以及npm -v查看版本号三、安装vue-clinpm install -g vue-cli查看vue版本号(注：这里的-V的V必须为大写)vue -V四、使用v
vue-easytable-基于Vue2.x的功能强大的表组件-Vue.js开发
05-27
vue-easytable 切换中文 Introduction Based on vue2.x flexible table components. API & Examples(如果访问不了说明被墙了，我也很无奈......) API&Examples Features Adaptive, you vue-easytable 切换中文 Introduction Based on vue2.x flexible table components. API & Examples(如果访问不了说明被墙了，我也很无奈......) API&Examples Features Adaptive, you can automatically adapt to the browser window changes Fixed column, header fixed   Support column width drag Supports single field sorting and multiple field sorting Custom columns, c
Element-UI详解
最新发布
科技追踪者的专栏
05-22 1万+
Element-UI 是一个功能强大、使用便捷的 Vue.js UI 组件库，它为开发者提供了一整套解决方案，大大提高了前端开发的效率和质量。通过本文的介绍，相信你已经对 Element-UI 有了深入的了解。无论是企业后台、内容管理系统还是在线教育平台，Element-UI 都能帮助你快速构建出高质量的应用。希望你在实际项目中能充分利用 Element-UI 的强大功能，开发出更多优秀的应用。
网站快速成型工具-Element UI
weixin_48143996的博客
12-06 6326
Element UIElement UI1 什么是Element UI？？？？2 搭建环境2.1 创建vue项目2.2 安装 element-ui组件2.3 Element UI 引入3 布局3.1 布局3.2 reset.css3.3 满屏填充4 导航条4.1 需求4.2 导航条4.3 路由4.4 页面刷新导航选中问题5 表格：查询列表5.1 测试页面5.2 基本表格5.3 表格修饰5.4 多选![在这里插入图片描述](https://img-blog.csdnimg.cn/87a16b32f4a447e
ElementUI使用指南(一文即可上手创建简单页面)
weixin_43819028的博客
05-08 4655
Element，是由国内的饿了么团队开发并开源的一套面向开发者、设计师和产品经理准备的基于 Vue 的UI组件库。
【Element-ui】Element-ui是什么？如何安装
m0_62599305的博客
12-02 2万+
在Web开发中，使用现成的UI组件库能够极大地提高开发效率。而Element UI（饿了么团队开发的一套基于Vue.js的UI组件库）就是其中备受欢迎的一款。Element UI提供了丰富的组件，使得前端开发者能够轻松地创建漂亮且功能强大的用户界面。在本文中，我们将介绍Element UI是什么，以及如何安装和使用它。Element UI是一个基于Vue.js的开源UI组件库，专为开发者提供了一套优雅而灵活的UI组件。它包含了各种常用的Web组件，如按钮、表单、导航等，以及高级组件，如日期选择器、对话框等。
基于ThinkPHP6.x+Vue3+Elementui++Vite开发 ,一款免费开源的多用户，多应用的独立版SAAS框架
04-03
狂团KtAdmin是一款支持快速调用ChatGPT、GPT3.5、GPT4、文心一言、SD、MJ、AI绘画等人工智能技术的免费开源SAAS框架。同时KtAdmin 是一款免费开源的多用户，多应用的独立版SAAS系统开发框架
Vue.js+Node.js+MySQL的前后端+数据库系统结构
烧烤摊摊主蔡文磊的烧烤摊
06-28 6004
前言: 大三暑假回国实习, 经过了1个月时间的培训学习, 本人渐渐熟悉了实习的工作环境和节奏. 由于我所在的前端APP研发部门使用的是Vue.js框架, 因此我在被分配**[公司官方网站的重制]**任务后, 研究并应用了这个以: Vue.js为前端, Node.js为后端, MySQL为数据库的总体结构. 希望为有类似开发需求的同学提供可参考的例子. 文章字数: ～1600字 阅读时间: ～15分...
Vue基础入门&&Elment基础使用
peng_19_20_qing的博客
07-04 349
Vue和Element 1. Jquery他操作数据时伴随着需要操作dom 2. Vue主要面向数据操作（JSP） 一 Vue 快速入门 1.1Vue 介绍 Vue 是一套构建用户界面的渐进式前端框架 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合 通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件 特点 易用：在有 HTML CSS JavaScript 的基础上，快速上手。 灵活：简单小巧的核心，渐进式技术栈，足以应
Element-UI简介
weixin_64704029的博客
08-07 9795
element-ui是一个前端的ui框架，封装了很多已经写好的ui组件，例如表单组件，布局组件，表格组件.......是一套桌面端组件。Element - 网站快速成型工具。
elementui中的el-col组件怎么用
m0_68094390的博客
05-20 2412
安装ElementUI：先在项目中引入ElementUI库，可以通过npm、yarn或直接下载ElementUI的压缩包来安装。ElementUI的el-col组件主要用于布局，用来控制布局元素在网页上的宽度和位置。除以上几个属性之外，还可以在el-row组件上设置gutter属性来设置列之间的间距。引入el-col组件：在需要使用el-col组件的组件中先引入el-col组件。
饿了么神级UI组件库——Element-UI使用指南
m0_67402235的博客
03-10 3万+
1.Element-UI介绍 element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建。 Element-UI官方站点：https://element.eleme.cn/#/zh-CN 可以进去选择想要的组件，直接复制代码，改巴改巴，就可以运用到自己的项目场景。 2.Element-UI使用 2.1 命令行方式安装 1. 创建 一个新的项目 2. 当前项目下打开终端, 安装依赖包 ,执行下面的命令 npm i element-ui -S 3. 打开 ma
Element-UI
qq_50048558的博客
10-26 1万+
一、Element-UI介绍 element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建 Element-UI官方站点：点击此处 https://element.eleme.cn/#/zh-CN 二、Element-UI使用 1.命令行方式安装 创建 一个新的项目 当前项目下打开终端, 安装依赖包 ,执行下面的命令 npm i element-ui -S 打开 main.js , 导入Element-UI 相关资源. main.js是工程的入口文件
Element UI快速入门
weixin_44591656的博客
12-29 5257
Element UI快速入门 1.1 官方定义 网站快速成型工具和桌面端组件库 1.2 定义 Element UI 就是基于vue的一个ui框架，该框架基于vue开发了很多相关组件，方便我们快速开发页面。 2.安装Element UI 2.1 通过vue脚手架创建项目 vue init webpack element(项目名) 2.2 在vue脚手架项目中安装 Element UI # 1.下载elementUI npm i element-ui -S #2.指定当前项目中使用elementui /*
快速上手 Vue 和 Element-UI 组件库
热门推荐
程序猿追的博客
12-19 5万+
vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架；Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。 Vue.js提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。 其目标是通过尽可能简单的API实现响应式的数据绑定和可组合的视图组件。
elementui的介绍和使用 以及使用elementui完成增删改查和登录
Ysuhang的博客
05-31 2万+
elementui的介绍和使用 以及使用elementui完成增删改查和登录
element组件使用
nana525484608的博客
09-10 1780
1、el-date-picker 时间范围组件 html部分: <el-date-picker v-model="qryData.time" :type="qryData.dateStyle=='day'?'daterange':'monthrange'" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="qryData.dateStyle=='
大地老师深度解析：Vue3.x+Ts+Vuex+Antd全栈实战教程
本篇教程是针对Vue3.x技术栈的全面学习指南，由经验丰富的讲师大地老师精心录制，适合初学者和进阶开发者。课程始于2020年11月，内容涵盖了Vue3.x的核心技术与常用框架集成，确保了教学的专业性和实用性。 1. **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值