8.31总结 Element-UI

一、选择

        <el-select v-model="value" placeholder="请选择" @change="handleChange">

 methods: {
            handleChange(value) {
                v.$message.error(value);
            }
        }

        @change="handleChange"中@change作用相当于Vue的@click() 和 Js的 onclick()，用于绑定事件。

        v.$message.error(value);页面窗口弹出提示框。

        <el-select v-model="value" placeholder="请选择" @change="handleChange">
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>

         return {
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: ''
            }
        },

二、表格

        :data="tableData"需要循环的数组。

            <el-table
                :data="tableData"
                style="width: 100%">

            <el-table-column
            <!-prop数组里的值 label表头显示内容--->
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>

            </el-table>
          

            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
            }] 

        按钮删除元素，获取值与调用方法

                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>

                    methods: {
                    handleDelete(i,emp){
                        v.empArr.splice(i,1);
                        }
                    }

 插入值到数组     f() {
    v.arr.push({name: v.emp.name, salzry: v.emp.salary, job: v.emp.job})
},

三、导航栏

           :default-active="activeIndex2"默认选中el-menu-item index="1"。

            mode="horizontal"横向展示列表菜单。

    <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
    <el-menu-item index="1" >精彩活动</el-menu-item>
    <el-menu-item >当季女装</el-menu-item>
    <el-menu-item >过季男装</el-menu-item>
    <el-menu-item >亚洲电影</el-menu-item>
    <el-menu-item >欧美电影</el-menu-item>

    return {
              activeIndex: '1',
              activeIndex2: '1'
            };

四、分栏

        span="12"，分为12栏。

    <!--el-row 表示行  gutter表示间隔-->
    <el-row gutter="10">
        <!--el-col 表示列 span设置占多少分栏-->
        <el-col span="12">
            <div class="c1"></div>
        </el-col>
        <el-col span="12">
            <div class="c1"></div>
        </el-col>
    </el-row>

五、页面布局

 <h1>上下</h1>
    <el-container>
        <!--默认60px高度-->
        <el-header>Header</el-header>
        <el-main>Main</el-main>
    </el-container>

    <h1>上中下</h1>
    <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
    </el-container>

    <h1>左右</h1>
    <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
    </el-container>

    <h1>上下（左右）</h1>
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-main>Main</el-main>
        </el-container>
    </el-container>

    <h1>上下左右上下</h1>
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
                <el-main>Main</el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </el-container>

六、走马灯

        :src="i" 单向绑定元素。

    <h1>图片轮播图</h1>
    <el-carousel trigger="click" height="600px">
        <el-carousel-item  v-for="i in arr">
            <img :src="i" width="100%" alt="">
        </el-carousel-item>
    </el-carousel>


    return {
                arr:["../a.jpg","../b.jpg","../c.gif"]
            }

        卡片化

    <h1>卡片化</h1>
    <template>
        <el-carousel :interval="4000" type="card" height="300px">
            <el-carousel-item  v-for="i in arr">
                <img :src="i" width="100%" alt="">
            </el-carousel-item>
        </el-carousel>
    </template>

        卡片化可以单独使用

        <el-card>

                 <h1>h1</h1>

        </el-card>

七、竖的水平分割线

     <el-divider direction="vertical"></el-divider>

八、其他

        background-size: cover; /*浏览器缩放，背景不会变大变小*/ 

        hite-space: nowrap;/*让内容在一行里显示*/

        text-overflow: ellipsis;/*超出内容按省略号显示*/

        阴影效果

        .p_img:hover {

        position: relative; top: 5px;

        /*元素阴影*/

        box-shadow: 0 0 5px 5px #233;

        }