AI 助理
备案控制台
开发者社区 云计算 文章 正文

Element-UI快速入门（二）

2022-05-25 206
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Element-UI快速入门（二）

5.表格：查询列表


测试页面微信图片_20220525232026.png

基本表格

微信图片_20220525232048.png

<template>
  <div>
    <!-- 列表 -->
    <el-table :data="studentList" >
      <el-table-column prop="sid" label="编号" width="150"></el-table-column>
      <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
      <el-table-column prop="gender" label="性别" width="150"></el-table-column>
      <el-table-column prop="age" label="年龄" width="150"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      studentList: [
        {
          sid: 's001',
          sname: '张三',
          gender: '男',
          age: 18
        },
        {
          sid: 's002',
          sname: '李思',
          gender: '女',
          age: 21
        }
      ]
    }
  }
}
</script>
<style>
</style>

表格修饰微信图片_20220525232114.png

微信图片_20220525232412.png

<template>
  <div>
    <!-- 列表 -->
    <el-table :data="studentList" stripe border >
      <el-table-column prop="sid" label="编号" width="150"></el-table-column>

微信图片_20220525232439.png

多选微信图片_20220525232135.png

<template>
  <div>
    <!-- 列表 -->
    <el-table :data="studentList" stripe border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="sid" label="编号" width="150"></el-table-column>
      <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
      <el-table-column prop="gender" label="性别" width="150"></el-table-column>
      <el-table-column prop="age" label="年龄" width="150"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;  //保存选中的数据
    }
  },
  data () {
    return {
      multipleSelection: [],  //多选，选中的数据
      studentList: [
        {
          sid: 's001',
          sname: '张三',
          gender: '男',
          age: 18
        },
        {
          sid: 's002',
          sname: '李思',
          gender: '女',
          age: 21
        }
      ]
    }
  }
}
</script>
<style>
</style>

自定义模板


微信图片_20220525232127.png微信图片_20220525232135.png

<template>
  <div>
    <!-- 列表 -->
    <el-table :data="studentList" stripe border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="sid" label="编号" width="150"></el-table-column>
      <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
      <el-table-column prop="gender" label="性别" width="150"></el-table-column>
      <el-table-column prop="age" label="年龄" width="150"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;  //保存选中的数据
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  },
  data () {
    return {
      multipleSelection: [],  //多选，选中的数据
      studentList: [
        {
          sid: 's001',
          sname: '张三',
          gender: '男',
          age: 18
        },
        {
          sid: 's002',
          sname: '李思',
          gender: '女',
          age: 21
        }
      ]
    }
  }
}
</script>
<style>
</style>

练习：展示“爱好”信息

      studentList: [
        {
          sid: 's001',
          sname: '张三',
          gender: '男',
          age: 18,
          hobbies: ['抽烟','喝酒','烫头']
        },
        {
          sid: 's002',
          sname: '李思',
          gender: '女',
          age: 21,
          hobbies: ['抽烟','烫头']
        }
      ]

微信图片_20220525232151.png

<template>
  <div>
    <!-- 列表 -->
    <el-table :data="studentList" stripe border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="sid" label="编号" width="150"></el-table-column>
      <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
      <el-table-column prop="gender" label="性别" width="150"></el-table-column>
      <el-table-column prop="age" label="年龄" width="150"></el-table-column>
      <el-table-column label="爱好" >
        <template slot-scope="scope">
          <el-tag type="warning" v-for="(hobby,index) in scope.row.hobbies" :key="index">{{hobby}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;  //保存选中的数据
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  },
  data () {
    return {
      multipleSelection: [],  //多选，选中的数据
      studentList: [
        {
          sid: 's001',
          sname: '张三',
          gender: '男',
          age: 18,
          hobbies: ['抽烟','喝酒','烫头']
        },
        {
          sid: 's002',
          sname: '李思',
          gender: '女',
          age: 21,
          hobbies: ['抽烟','烫头']
        }
      ]
    }
  }
}
</script>
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
</style>

总结

image.png

条件查询


微信图片_20220525233026.png

<!-- 条件表单 start -->
    <el-form :inline="true" :model="studentVo" size="mini" class="demo-form-inline">
      <el-form-item label="班级">
        <el-select v-model="studentVo.cid" placeholder="请选择班级">
          <el-option label="Java12班" value="c001"></el-option>
          <el-option label="Java34班" value="c002"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="studentVo.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-col :span="11">
          <el-input v-model="studentVo.startAge" placeholder="请输入开始年龄"></el-input>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-input v-model="studentVo.endAge" placeholder="请输入结束年龄"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 条件表单 end -->

分页条


微信图片_20220525233135.png


    <!-- 分页条start -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
    <!-- 分页条end -->


关键词：
UI快速入门
陶然同学
目录
相关文章
孤影过客
|
8月前
|
JavaScript 前端开发 开发者
Element-UI快速入门
Element-UI 是一个功能强大的 Vue 组件库，非常适合快速开发高质量的企业级前端应用。通过本文的快速入门指南，你应该能够开始使用 Element-UI，并将其组件应用到你的项目中。不断探索和实践将帮助你更好地理解和利用这个工具库为你的应用增添独特的价值。 希望这篇博客能够帮助你快速上手 Element-UI，为你的 Vue 项目加速开发。
孤影过客
204 1
周盛欢
|
9月前
|
JavaScript Windows
Element-ui快速入门
Element-ui快速入门
周盛欢
100 0
游客g7kiuqrvkhn3g
|
9月前
|
资源调度 JavaScript
Element-ui快速入门
Element-ui是基于Vue.js的桌面端UI组件库，用于快速构建美观界面。以下是其快速入门步骤：1) 使用npm或yarn安装；2) 在main.js中引入样式和组件；3) 直接在Vue组件中使用Element-ui组件；4) 可根据需要定制主题样式。参照官方文档可了解更多组件和用法。
游客g7kiuqrvkhn3g
114 1
陶然同学
|
前端开发
Element-UI快速入门 （三）
7.常见组件 按钮 Button
陶然同学
99 0
陶然同学
Element-UI快速入门 （二）
5.表格：查询列表 测试页面
陶然同学
192 0
陶然同学
|
JavaScript 前端开发 开发者
Element-UI快速入门（一）
什么是Element UI Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供一组组件 Element UI 提供组件的参考实例, 直接复制
陶然同学
412 0
Designer小郑
|
JavaScript 前端开发 开发工具
Vue组件库 View UI快速入门 环境配置
Vue组件库 View UI快速入门 环境配置
Designer小郑
411 0
陶然同学
|
前端开发
Element-UI快速入门（三）
Element-UI快速入门
陶然同学
190 0
Element-UI快速入门（三）
陶然同学
Element-UI快速入门（二）
Element-UI快速入门
陶然同学
127 0
Element-UI快速入门（二）
陶然同学
|
前端开发
Element-UI快速入门（四）
Element-UI快速入门（四）
陶然同学
150 0
Element-UI快速入门（四）

热门文章

最新文章

  • 1
    用自然语言控制电脑，字节跳动开源 UI-TARS 的桌面版应用！内附详细的安装和配置教程
  • 2
    UI-TARS：字节跳动开源专注于多平台 GUI 自动化交互的视觉语言模型
  • 3
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    移动端UI名词 - AxureMost
  • 5
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
  • 6
    unity判断鼠标在不在UI上
  • 7
    element-ui：el-input输入数字-整数和小数
  • 8
    解决ng界面长表达式(ui-set)
  • 9
    VUE element-ui之el-tree树形控件循环遍历渲染dom节点；子节点横向排列；控件添加指示线
  • 10
    Android UI设计准则
  • 1
    unity判断鼠标在不在UI上
    34
  • 2
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 3
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    139
  • 4
    移动端UI名词 - AxureMost
    59
  • 5
    用自然语言控制电脑，字节跳动开源 UI-TARS 的桌面版应用！内附详细的安装和配置教程
    528
  • 6
    UI-TARS：字节跳动开源专注于多平台 GUI 自动化交互的视觉语言模型
    362
  • 7
    不要再责怪你的UI设计师为什么没有用rp？ps？figma？sketch？xd？如何免费转换非在线工具收费转换-本文将教会你常规ui设计源文件格式相互之间如何转换并且保持矢量图和标注注释问题-优雅草央千澈
    42
  • 8
    SpringBoot整合Flowable【03】- 通过Flowable-UI体验一个简单流程
    124
  • 9
    Aria-UI：港大联合 Rhymes AI 开源面向 GUI 智能交互的多模态模型，整合动作历史信息实现更加准确的定位
    118
  • 10
    产品经理-桌面端UI名词
    40

    • 相关电子书

    更多
  • 使用TensorFlow搭建智能开发系统自劢生成App UI代码
  • Fusion Design - 企业级UI解决方案揭秘
  • 使用TensorFlow搭建智能开发系统自动生成App UI
    • 下一篇
    阿里云oss简介和如何对接使用