从vue到elementUI项目（二）

最新推荐文章于 2024-06-04 12:58:37 发布

每天看一遍，防止恋爱&&堕落

最新推荐文章于 2024-06-04 12:58:37 发布

阅读量361

点赞数

分类专栏： VUE 文章标签： vue javascript vue.js typescript elementUI

本文链接：https://blog.csdn.net/zengraoli/article/details/108455065

版权

VUE 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

文章目录

Element常用组件详解
参考链接
全文所涉及的代码下载地址

Element常用组件详解

安装element

进入到文件夹中执行以下命令进行安装

yarn add element-ui -S // -S表示生产环境和开发环境都要使用的依赖

在main.js中引入element，就可以在页面中使用了

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 挂载element
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Element常用组件之布局组件详解

布局组件

el-row、el-col
el-container、el-header、el-aside、el-main、el-footer

先建立一个框架，在views下新建文件夹element子文件夹，里面存放layout.vue，内容即为后续填入的内容

在router/index.js添加layout.vue的路由映射

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/Home.vue'),
  },
  {
    path: '/layout',
    component: () => import('../views/element/Layout.vue')
  },
]

const router = new VueRouter({
  routes
})

export default router

el-row、el-col的例子，在layout.vue填入如下内容

<template>
    <div>
        <h3>4等分布局 gutter为间隔</h3>
        <el-row :gutter="20">
            <el-col :span="6"><div class="content">1</div></el-col>
            <el-col :span="6"><div class="content">2</div></el-col>
            <el-col :span="6"><div class="content">3</div></el-col>
            <el-col :span="6"><div class="content">4</div></el-col>
        </el-row>
    </div>
</template>
<style scoped>
    .content {
        background-color: #000;
        color: #fff;
    }
</style>

el-container、el-header、el-aside、el-main、el-footer例子，在layout.vue填入如下内容

<template>
    <div>
        <h3>container布局简单使用</h3>
        <el-container>
            <el-header>Header</el-header>
            <el-main>Main</el-main>
            <el-footer>Footer</el-footer>
        </el-container>
    </div>
</template>
<style scoped>
    .content {
        background-color: #000;
        color: #fff;
    }
</style>

常用属性

span：对文档中的行内元素进行组合
gutter：间隔大小

Element常用组件之弹出类型组件详解

常用弹出组件

el-dialog
el-popover

sync修饰符是一种语法糖，主要完成了两个事情，第一个是绑定了一个属性，第二个是监听这个属性的更新事件

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

示例：ElementUI中的el-dialog

// 第一种写法
<el-dialog :visible.sync="dialogVisible">
// 第二种写法
<el-dialog :visible="dialogVisible" :before-close="beforeClose">
// 第一种写法关闭或是点击空白处无需特别处理理，el-dialog组件内部会修改当前值状态，通过.sync修饰符传递给父组件；
// 第二种写法，需要再beforeClose⽅方法内手动处理this.dialogVisible = false。

示例代码，需要按照Layout.vue方式配置路由

<template>
    <div>
        <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<style scoped>
    .content {
        background-color: #000;
        color: #fff;
    }
</style>
<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

在app.vue中加上跳转按钮，跳转到Pop.vue中

<template>
  <div id="app">
    <div id="nav">
    </div>
    <router-link to='/home'>Home</router-link>
    |
    <router-link to='/pop'>Pop</router-link>
    <router-view/>
  </div>
</template>
<style>
</style>

点开的效果如下

假如在:visible.sync="dialogVisible"中没有sync，那么点关闭后需要自己关闭对话框，也就是这时候的handleClose修改成以下内容

<template>
    <div>
        <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
        <el-dialog
            title="提示"
            :visible="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<style scoped>
    .content {
        background-color: #000;
        color: #fff;
    }
</style>
<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭222？')
          .then(_ => {
            this.dialogVisible = false
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

dialog组件中的插槽

title
footer

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
    title="提示"
    :visible="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
</el-dialog>

Element常用组件之表格组件详解

基础表格

在 Table 组件中，每一个表格由一个 Table-Column 组件构成，也就是表格的列

表格常用属性介绍

属性名	作用
height	给表格设置高度，同时固定表头
show-header	设置是否显示表头
row-class-name	设置一个函数或者固定的名字作为行的类名
border	是否显示表格竖直方向的边框，设置后可通过改变边框设置列宽

列常用属性介绍

属性名	作用
label	当前列的表头名称
prop	传入的表格json数据的key值
show-overflow-tooltip	是否设置文字超出列宽时悬浮显示完整内容

表格的例子，tableData就是json的数据

<template>
  <div>
    <!-- 基本表格 -->
    <el-table :data="tableData" style="width: 100%" height="200px" border>
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip>
      </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 {
  props: {
    isShowOperate: {
      type: Boolean,
      default: true
    }
  },
  // 数据部分
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      tableLabel: {
        date: '日期',
        name: '姓名',
        address: '地址'
      }
    }
  },
  // 表格的操作函数
  methods: {
    handleEdit (index, row) {
      console.log(index, row);
      // this.$emit('edit', row)
    },
    handleDelete (index, row) {
      console.log(index, row);
    }
  }
} 
</script>
<style lang="scss" scoped>
</style>

通过v-for封装适用性更好的表格

<template>
  <div>
    <!-- v-for封装的表格 -->
    <el-table :data="tableData">
      <el-table-column v-for="(val, key) in tableLabel" :key="key" :prop="key" :label="val" width="180">
      </el-table-column>
      <el-table-column label="操作" v-if="isShowOperate">
        <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 {
  props: {
    isShowOperate: {
      type: Boolean,
      default: true // 是否显示操作
    }
  },
  // 数据部分
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      tableLabel: { // 表格信息的label
        date: '日期',
        name: '姓名',
        address: '地址'
      }
    }
  },
  // 表格的操作函数
  methods: {
    handleEdit (index, row) {
      console.log(index, row);
      // this.$emit('edit', row)
    },
    handleDelete (index, row) {
      console.log(index, row);
    }
  }
} 
</script>
<style lang="scss" scoped>
</style>

Element常用组件之表单组件详解

基础表单
- 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，Form-item可以是下拉框、输入框、日期选择器等各种表单组件
添加表单验证
封装表单组件
- 观察基础表单
  - 总结一个表单组件动态的参数有哪些
    - 最基础
      - label，model、type
    - 扩展
      - rule、placeholder、其他配置(⾃自动补全，可清除等)
- 定义循环的数据结构
  - 数组对象

在views/下创建一个Form.vue，内容为例子需要填充的内容；然后在router/index.js下加入path为/form的路由

基础表单例子，表单主要是model和label组成

<template>
  <div style="margin-top:20px">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="即时配送">
        <el-switch v-model="form.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="活动性质">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
          <el-checkbox label="地推活动" name="type"></el-checkbox>
          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊资源">
        <el-radio-group v-model="form.resource">
          <el-radio label="线上品牌商赞助"></el-radio>
          <el-radio label="线下场地免费"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活动形式">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

添加表单的校验，省略部分参见官网：https://element.eleme.cn/#/zh-CN/component/form

<template>
  <div style="margin-top:20px">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" 
    ...
    </el-form>
  </div>
</template>
<script>
export default {
    data() {
      ...
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      ...
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>

对表单进行封装，封装以后更利用使用，还是用v-for来封装

<template>
  <el-form :model="form" :ref="form" label-width="80px" style="width: 750px">
    <el-form-item :label="item.label" v-for="(item, index) in formLabel" :key="index">
      <el-input v-model="form[item.key]" v-if="item.type == 'input'"></el-input>
      <el-select v-model="form[item.key]" placeholder="请选择活动区域" v-if="item.type === 'select'">
        <el-option v-for="(subitem, index) in item.options" :key="index" :label="subitem.label" :value="subitem.value"></el-option>
      </el-select>
      <el-date-picker v-if="item.type === 'date-picker'" type="date" placeholder="选择日期" v-model="form[item.key]" style="width: 100%;"></el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
    data() {
      return{ // 定义for的字段
        form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabel: [
        {
          label: '活动名称',
          key: 'name',
          type: 'input'
        },
        {
          label: '活动区域',
          key: 'region',
          type: 'select',
          options: [
            {
              label: '区域1',
              value: 'shanghai'
            },
            {
              label: '区域2',
              value: 'beijing'
            }
          ]
        },
        {
          label: '活动时间',
          key: 'date1',
          type: 'date-picker'
        },
      ],
      }
    },
    methods: {
      onSubmit () {
        console.log('submit!');
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>

参考链接

全文所涉及的代码下载地址

csdn下载链接

每天看一遍，防止恋爱&&堕落

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从vue到elementUI项目（二）

文章目录Element常用组件详解安装elementElement常用组件之布局组件详解Element常用组件之弹出类型组件详解Element常用组件之表格组件详解Element常用组件之表单组件详解参考链接Element常用组件详解安装element进入到文件夹中执行以下命令进行安装yarn add element-ui -S // -S表示生产环境和开发环境都要使用的依赖在main.js中引入element，就可以在页面中使用了import Vue from 'vue'import Ap
复制链接

扫一扫

专栏目录