Большие данные ------ JavaWeb ------ Vue

2024-07-12

Вью

определение
- Vue — это интерфейсная платформа, которая позволяет исключить операции DOM в собственном JavaScript и упростить написание.
  - Фреймворк MyBatis, который я изучил ранее, используется для упрощения написания кода JDBC, а Vue — это интерфейсный фреймворк, используемый для упрощения написания кода JavaScript;
  - Добавление комплексных кейсов в Axios и JSONВ DOM имеется большое количество операций, примеры следующие:
```
let brandName = document.getElementById("brandName").value;
let companyName = document.getElementById("companyName").value;
let ordered = document.getElementById("ordered").value;
let description = document.getElementById("description").value;
// 获取单选框数组
let status = document.getElementsByName("status");
//2.3 给JS对象设置数据
formData.brandName = brandName;
formData.companyName = companyName;
formData.ordered = ordered;
formData.description = description;
1
2
3
4
5
6
7
8
9
10
11
```
- Он основан на идее MVVM (Model-View-ViewModel) и может реализовывать данныеДвусторонняя привязка , сосредоточьте программирование на данных
  - Примечание. Изученный ранее шаблон MVC может реализовать только одностороннее отображение от модели к представлению и не может связать представление и модель друг с другом (то есть, пока изменяется одна из модели и представления, другая также будет меняться). изменять)
- Можно сделать самомуОфициальный веб-сайтизучать

Быстрый старт с Vue

Создайте новую HTML-страницу и импортируйте ее.Vue.jsдокумент
- Если вы вводите локальные файлы Vue (блогер использует последнюю версию VUE2:Vue2.7.16开发环境, вы можете перейти на официальный сайт, чтобы загрузить соответствующийjsдокумент)
```
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
1
```
- Если вы представите сервис Vue, предоставляемый удаленным пакетом npm
  - среда разработки
```
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
1
```
  - Производственная среда
```
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
1
```

В области кода JS (в<Script>тело тега), создайте основные объекты Vue для привязки данных.

При создании объекта Vue вам необходимо передать объект js, и в объекте необходимы следующие свойства:

Атрибуты	объяснять
`el`	Укажите, какие теги управляются Vue. Значение этого атрибута`#app` середина`app` Для тегов, управляемых Vue`id`значение атрибута
`data`	используется для определения типов данных
`methods`	Функция, используемая для определения, значение функции может быть возвращено через return

new Vue({
    el:"#app",
    data() {
        return {
            username : ""
        }
    }
});
1
2
3
4
5
6
7
8

Написание представлений (Html-код)
- В следующем примереdivМаркированныйidДля приложения создается соответствующий объект Vue.elзначение атрибута
- <input>Label создает поле ввода сv-modelСвойства для двунаправленной привязки поля ввода к модели Vue
  - вv-modelЗначение атрибута соответствует созданному объекту Vue.returnНазвания моделей в скобках совпадают.
- {{}}Это определено в Vue интерполяционное выражение , используется для получения данных в модели
```
<div id="app">
    <input name="username" v-model="username">
    {{username}}
</div>
1
2
3
4
```

Полный код файла vueDemo1.html выглядит следующим образом.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <input name="username" v-model="username">
            {{username}}
        </div>

        <!--引入vue.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <script>
            // 创建Vue核心对象
            new Vue({
                el:"#app",
                //data() 是 ECMAScript 6 版本的新的写法
                data() {
                    return {
                        username : ""
                    }
                }
                /*等同于
                data: function () {
                    return {
                        username : ""
                    }
                }这个是老版本
                */
            });
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

После того, как браузер откроет html-страницу, рабочий скриншот выглядит следующим образом:

Вставьте сюда описание изображения

Директива Vue

инструкция	эффект
`v-bind`	Привязывайте значения атрибутов к HTML-тегам, например, устанавливая `href` , `css`стиль и т. д.
`v-model`	Создание двусторонней привязки данных к элементам формы.
`v-on`	Привязка событий к HTML-тегам
`v-if`	Условно визуализировать элемент, определенный как`true`Рендеринг при необходимости, в противном случае не рендеринг
`v-else`	Условно визуализировать элемент, определенный как`true`Рендеринг при необходимости, в противном случае не рендеринг
`v-else-if`	Условно визуализировать элемент, определенный как`true`Рендеринг при необходимости, в противном случае не рендеринг
`v-show`	Отображение элемента на основе условий. Разница в том, что переключатель.`display`значение атрибута
`v-for`	Отрисовка списка, обход элементов контейнера или свойств объекта

определение:HtmlС маркировкойv-Особые свойства приставки, разные инструкции имеют разное значение.

`v-bind`、`v-model`

v-bind: Привязка значений атрибутов к тегам HTML, например установка href , cssстиль и т. д.
- Примеры следующие:
```
<a v-bind:href="url">百度一下</a>
1
```
- можно сократить как
```
<a :href="url">百度一下</a>
1
```
  В будущем, пока URL-адрес изменится, соответствующийv-bindЗначения атрибутов также сразу изменятся.
v-model:Создать двустороннюю привязку данных к элементам формы.
- Примеры следующие:
```
<input name="username" v-model="username"> 
1
```

Полный пример выглядит следующим образом

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <input name="urlname" v-model="url">
            {{url}}
            <br>
            <a :href="url">点击一下跳转</a>
        </div>

        <!--引入vue.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <script>
            // 创建Vue核心对象
            new Vue({
                el:"#app",
                //data() 是 ECMAScript 6 版本的新的写法
                data() {
                    return {
                        url : ""
                    }
                }
                /*等同于
                data: function () {
                    return {
                        url : ""
                    }
                }这个是老版本
                */
            });
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Вставьте сюда описание изображения

`v-on`

v-on: Привязка событий к тегам Html.
Пример: событие привязано к нажатию кнопки, и событие выполняется.show()метод, который написан наmethodsв естественных условиях
- Независимо от того, является ли это полной формой или сокращенной формой, если связанное событие является методом, метод может опускать круглые скобки.
- Полная форма выглядит следующим образом
```
<input type="button" value="按钮" v-on:click="show()">

<input type="button" value="按钮" v-on:click="show">
1
2
3
```
- Сокращенная форма выглядит следующим образом
```
<input type="button" value="按钮" @click="show()">

<input type="button" value="按钮" @click="show">
1
2
3
```

Полный пример кода выглядит следующим образом:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <input type="button" value="按钮" v-on:click="show()">
            <!--简略形式-->
            <input type="button" value="按钮" @click="sunShow">
        </div>
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <script>
            new Vue({
                el:"#app",
                methods:{
                    show() {
                        alert("第一个按钮被点击");
                    },
                    sunShow() {
                        alert("第二个按钮被点击")
                    }
                }
            });
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

После открытия html-страницы через браузер рабочий скриншот выглядит следующим образом:

Вставьте сюда описание изображения

`v-if`、`v-show`

v-if、v-else、v-else-if: визуализировать элемент условно, визуализировать его, когда он окажется истинным, в противном случае не визуализировать его.

При совместном использовании они эквивалентныif-else if-else

<div v-if="count == 3">count==3</div>
<div v-else-if="count == 2">count==2</div>
<div v-else>count !=2 && count != 3</div>
1
2
3

Полный пример кода выглядит следующим образом

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            请输入count的值：<br>
            <input type="text" v-model="count">
            <br>
            count值为：
            <br>
            <div v-if="count == 3">count==3</div>
            <div v-else-if="count == 2">count==2</div>
            <div v-else>还未输入，请输入count值</div>

        </div>
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <script>
            new Vue({
                el:"#app",
                data() {
                    return {
                        count:""
                    }
                }
            });
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

После того, как браузер откроет html-страницу, скриншот будет выглядеть следующим образом:

Вставьте сюда описание изображения

v-show: Отобразить элемент на основе условий.
- v-show иv-if Эффект тот же, но принцип реализации другой:v-show Принцип не отображения заключается в добавлении соответствующего тегаdisplay css и установите значение атрибутаnone,иv-ifЭто прямо нетdivТеги появятся в исходном коде только при выполнении условий.div Этикетка.Подробности смотрите на снимке экрана с полным примером кода.
```
<div v-show="count == 3">div4</div>
1
```

Полный пример кода выглядит следующим образом

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            请输入count的值：<br>
            <input type="text" v-model="count">
            <br>
            count值为：
            <br>
            <div v-if="count == 3">count==3</div>
            <div v-else-if="count == 2">count==2</div>
            <div v-else>还未输入，请输入count值</div>
            <hr>
            <div v-show="count == 3">v-show：当count==3时展示</div>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <script>
            new Vue({
                el:"#app",
                data() {
                    return {
                        count:""
                    }
                }
            });
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Браузер открывает html-файл, и рабочий снимок экрана выглядит следующим образом:

Вставьте сюда описание изображения

`v-for`

v-for: Отрисовка списка, обход элементов контейнера или свойств объекта.

Обход массива обычным способом

<div v-for="addr in addrs">
    {{addr}}<br>
</div>
1
2
3

Обход массива по индексу

<div v-for="(addr,i) in addrs">
    {{i+1}}：{{addr}}<br>
</div>
1
2
3

пример кода

Обход массива обычным способом

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--遍历数组-->
            <div v-for="addr in addrs">
                {{addr}}<br>
            </div>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <script>
            new Vue({
                el:"#app",
                data() {
                    return {
                        addrs:["北京", "上海", "天津"]
                    }
                }
            });
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Вставьте сюда описание изображения

Обход массива по индексу

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--索引方式遍历数组-->
            <div v-for="(addr,i) in addrs">
                {{i+1}}：{{addr}}<br>
            </div>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <script>
            new Vue({
                el:"#app",
                data() {
                    return {
                        addrs:["北京", "上海", "天津"]
                    }
                }
            });
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Вставьте сюда описание изображения

Жизненный цикл Vue

состояние	этап цикла
`beforeCreate`	До создания
`created`	После создания
`beforeMount`	перед загрузкой
`mounted`	Монтаж завершен
`beforeUpdate`	До обновления
`updated`	Обновлено
`beforeDestroy`	до разрушения
`destroyed`	После разрушения

Жизненный цикл Vue состоит из восьми этапов.
- Каждый раз, когда инициируется событие жизненного цикла,методы жизненного цикла (также называемый методом хука)
Ниже приводится положение каждого жизненного цикла.
mounted: Монтирование завершено, инициализация Vue успешна, рендеринг HTML-страницы успешен.
- В этом методе мы можем отправить асинхронный запрос для загрузки данных.
- Простой пример
```
new Vue({
    el:"#app",
    mounted() {
      alert("Vue挂载完毕，发送异步请求")  
    }
});
1
2
3
4
5
6
```

Полный пример кода

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--普通方式遍历数组-->
            <div v-for="addr in addrs">
                {{addr}}<br>
            </div>
            <!--索引方式遍历数组-->
            <div v-for="(addr,i) in addrs">
                {{i+1}}：{{addr}}<br>
            </div>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <script>
            new Vue({
                el:"#app",
                data() {
                    return {
                        addrs:["北京", "上海", "天津"]
                    }
                },
                //简略版本
                mounted() {
                    alert("Vue挂载完毕，发送异步请求")
                }
                /*老版本
                mounted:function () {

                }*/
            });
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

Vue-кейс

Цель: использовать Vue, чтобы упростить запрос бренда и добавить функции.
Этот случай начинается сКомплексный пример Axios и JSONИсходя из этого, данный проект называется:VueDemo, был загружен в Gitee и можетСкачать самостоятельно

Искать все

Вставьте сюда описание изображения

brand.htmlВнесенные изменения заключаются в следующем

brand.htmlИзменения кода следующие:

Представляем файл vue.js
Создание основных объектов Vue для привязки данных.
использоватьmountedМетод отправляет асинхронный запрос и запрашивает данные после загрузки страницы.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <table border="1" cellspacing="0">
                <tr>
                    <th>序号</th>
                    <th>品牌名称</th>
                    <th>企业名称</th>
                    <th>排序</th>
                    <th>品牌介绍</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                <!--使用v-for循环遍历-->
                <tr v-for="(brand,i) in brands" align="center">
                    <td>{{i + 1}}</td>
                    <td>{{brand.brandName}}</td>
                    <td>{{brand.companyName}}</td>
                    <td>{{brand.ordered}}</td>
                    <td>{{brand.description}}</td>
                    <td>{{brand.status == 1 ? "启用" : "禁用"}}</td>
                    <td><a href="#">修改</a><a href="#">删除</a></td>
                </tr>
            </table>
        </div>
        <script src="js/axios-0.18.0.js"></script>
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <script>
            new Vue({
                el: "#app",
                data() {
                    return {
                        brands:[]
                    }
                },
                // 页面加载完成后利用mounted方法发送异步请求并查询数据
                mounted() {
                    // 发送异步请求并查询数据
                    // 在Vue的实例方法中，this指向Vue实例本身
                    var _this = this;
                    axios({
                        method:"get",
                        url:"http://localhost:8080/VueDemo/selectAllServlet"
                    }).then(function (resp) {
                        // 获取响应数据，并将数据赋给brands
                        // 错误写法：this.brands = resp.data;
                        /* 在Axios的then方法的回调函数中，this可能指向其他对象，通常是全局对象（在浏览器中是 window 对象）
                            所以需要提前将代指Vue示例本身的this赋给_this
                         */
                        //axios会自动将获取的JSON字符串数据转为js对象数组
                        _this.brands = resp.data;
                    })
                }
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

Снимок экрана после того, как Tomcat запускает веб-проект, выглядит следующим образом.

Вставьте сюда описание изображения

вопрос
- почему быvar _this = this, почему не напрямуюthis.brands=resp.data
  
  в JavaScript this Поведение ключевого слова зависит от контекста, в котором оно вызывается. В методе экземпляра Vuethis Указывает на сам экземпляр Vue.Но в Аксиосеthen В функции обратного вызова методаthis Может указывать на другие объекты, обычно глобальный объект (в браузерах этоwindow объект). Это приведет к тому, что вы не сможете правильно получить доступ к свойствам и методам экземпляра Vue.
  
  по определению var _this = this, вы получите экземпляр Vue this сохранить в_this переменная, а затем использовать ее в функции обратного вызова_this чтобы правильно ссылаться на экземпляр Vue.

добавить в

Вставьте сюда описание изображения

addbrand.htmlВнесенные изменения заключаются в следующем

brand.htmlИзменения кода следующие:

Создайте новую кнопку и привяжите к ней событие клика.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--给新增按钮绑定单击事件-->
            <input type="button" value="新增" v-on:click="addBrand()"><br>
            <hr>
            <table border="1" cellspacing="0">
                <tr>
                    <th>序号</th>
                    <th>品牌名称</th>
                    <th>企业名称</th>
                    <th>排序</th>
                    <th>品牌介绍</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                <!--使用v-for循环遍历-->
                <tr v-for="(brand,i) in brands" align="center">
                    <td>{{i + 1}}</td>
                    <td>{{brand.brandName}}</td>
                    <td>{{brand.companyName}}</td>
                    <td>{{brand.ordered}}</td>
                    <td>{{brand.description}}</td>
                    <td>{{brand.status == 1 ? "启用" : "禁用"}}</td>
                    <td><a href="#">修改</a><a href="#">删除</a></td>
                </tr>
            </table>
        </div>
        <script src="js/axios-0.18.0.js"></script>
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <script>
            new Vue({
                el: "#app",
                data() {
                    return {
                        brands:[]
                    }
                },
                methods:{
                  addBrand() {
                      location.href = "/VueDemo/addBrand.html";
                  }
                },
                // 页面加载完成后利用mounted方法发送异步请求并查询数据
                mounted() {
                    // 发送异步请求并查询数据
                    // 在Vue的实例方法中，this指向Vue实例本身
                    var _this = this;
                    axios({
                        method:"get",
                        url:"http://localhost:8080/VueDemo/selectAllServlet"
                    }).then(function (resp) {
                        // 获取响应数据，并将数据赋给brands
                        // 错误写法：this.brands = resp.data;
                        /* 在Axios的then方法的回调函数中，this可能指向其他对象，通常是全局对象（在浏览器中是 window 对象）
                            所以需要提前将代指Vue示例本身的this赋给_this
                         */
                        //axios会自动将获取的JSON字符串数据转为js对象数组
                        _this.brands = resp.data;
                    })
                }
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

addBrand.htmlКод изменен следующим образом:

представлятьvue.jsдокумент
Создание основных объектов Vue для привязки данных.
использоватьv-modelАтрибуты создаются на элементах формы.Двусторонняя привязка данных
Привязать событие нажатия для кнопки отправки

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>添加品牌</title>
    </head>
    <body>
        <h3>添加品牌</h3>
        <div id="app">
            <!--表单直接提交属于同步请求方式提交表单，为了使用异步方式以及AJAX+JSON异步方式提交所以要将action属性值设为空并将提交按钮的type属性值设为button-->
            <!--action的属性值为浏览器提交到服务器的资源路径-->
            <!--将action属性值由具体的url改为空-->
            <form action="" method="post">
                品牌名称：<input id="brandName" name="brandName" v-model="brand.brandName"><br>
                企业名称：<input id="companyName" name="companyName" v-model="brand.companyName"><br>
                排序：<input id="ordered" name="ordered" v-model="brand.ordered"><br>
                描述信息：<textarea rows="5" cols="20" id="description" name="description" v-model="brand.description"></textarea><br>
                状态：
                <input type="radio" name="status" value="0" v-model="brand.status">禁用
                <input type="radio" name="status" value="1" v-model="brand.status">启用<br>
                <!--将提交按钮的type属性由submit改为button-->
                <input type="button" v-on:click="submitForm()" value="提交">
            </form>
        </div>

        <script src="js/axios-0.18.0.js"></script>
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>

        <script>
            new Vue({
                el: "#app",
                data() {
                    return {
                        /*
                        由于数据最终要封装为对象，所以直接创建一个对象即可
                        注意：不需要给该对象属性，是因为 Vue.js 的双向数据绑定机制和响应式系统会自动处理，
                        即v-model 自动创建对象属性并追踪它们，只要用户填写输入框，就会自动将其作为brand对象的属性封装起来
                         */
                        brand:{}
                    }
                },
                methods:{
                    submitForm() {
                        var _this = this;
                        // 发送axios请求并添加数据
                        axios({
                            method:"post",
                            url:"http://localhost:8080/VueDemo/addServlet",
                            //3 JSON数据格式发送请求
                            // formData为JS对象，Axios会自动将JS对象转为JSON字符串然后在传给服务端
                            data:_this.brand
                        }).then(function (resp) {
                            //4 获取响应数据并判断响应数据是否为success
                            if(resp.data == "success"){
                                location.href = "http://localhost:8080/VueDemo/brand.html";
                            }
                        })
                    }
                }
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

После того, как Tomcat запустит веб-проект, снимок экрана будет выглядеть следующим образом:

Вставьте сюда описание изображения

Элемент

определение
- Это набор библиотек компонентов веб-сайта на основе Vue, которые можно использовать для быстрого создания веб-страниц.
- Компоненты: компоненты, составляющие веб-страницу, такие как гиперссылки, кнопки, изображения, таблицы и т. д.
- может быть основано наОфициальный сайт Элементаизучать

Уведомление:

Используется при быстром запускеelement-uiСкачать официальный сайтНевозможно загрузить, вы можете использовать следующий код, чтобы загрузить его самостоятельно (вы можете самостоятельно изменить путь загрузки и URL-адрес соответствующей версии)

import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.nio.charset.StandardCharsets;
import java.util.ArrayList;

/**
 * 下载element-ui
 */
public class Main {
    //本地保存目录
    static String fileP = "F:/insert/java/element-ui/";
    //url
    static String urlP = "https://unpkg.com/browse/[email protected]/";
    static String urlF = "https://unpkg.com/[email protected]/";
    public static void main(String[] args){
        try {
            GetPage("");
        } catch (Exception e) {
            e.printStackTrace();
        }
        System.out.println("done ......");
    }
    static void GetPage(String after) throws Exception {
        System.out.println(urlP + after);
        new File(fileP + after).mkdir();
        HttpURLConnection http = (HttpURLConnection) (new URL(urlP + after)).openConnection();
        http.setRequestMethod("GET");
        http.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3562.0 Safari/537.36");
        http.connect();
        if(http.getResponseCode() == 200) {
            InputStream inputStream = http.getInputStream();
            byte [] buffer = new byte[10240];
            ArrayList<byte []> byteList = new ArrayList<>();
            ArrayList<Integer> byteLength = new ArrayList<>();
            int length;
            int totalLength = 0;
            while( (length = inputStream.read(buffer)) != -1 ) {
                byteList.add(buffer);
                byteLength.add(length);
                totalLength += length;
                buffer = new byte[10240];
            }
            http.disconnect();
            byte [] all;
            all = new byte[totalLength];
            totalLength = 0;
            while(byteList.size() != 0) {
                System.arraycopy(byteList.get(0), 0, all, totalLength, byteLength.get(0));
                totalLength += byteLength.get(0);
                byteList.remove(0);
                byteLength.remove(0);
            }
            String content = new String(all, StandardCharsets.UTF_8);
            all = null;
            content = content.split("tbody")[1];
            String [] us = content.split("href="");
            for(int i = 1; i < us.length; i ++) {
                String href = us[i].split(""", 2)[0];
                if(href.equals("../")) {
                    continue;
                }
                if(href.charAt(href.length() - 1) == '/') {
                    GetPage(after + href);
                } else {
                    //下载文件，失败重试，大部分是网络原因
                    try {
                        GetFile(after + href);
                    }catch (Exception e){
                        System.out.println(after + href + " 下载失败，重试");
                        GetFile(after + href);
                    }
                }
            }
        } else {
            GetPage(after);
        }
    }
    static void GetFile(String url) throws Exception{
        System.out.println(url);
        HttpURLConnection http;
        http = (HttpURLConnection) (new URL(urlF + url)).openConnection();
        http.setRequestMethod("GET");
        http.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3562.0 Safari/537.36");
        http.connect();
        if(http.getResponseCode() == 200) {
            InputStream inputStream = http.getInputStream();
            byte [] buffer = new byte[10240];
            ArrayList<byte []> byteList = new ArrayList<>();
            ArrayList<Integer> byteLength = new ArrayList<>();
            int length;
            int totalLength = 0;
            while( (length = inputStream.read(buffer)) != -1 ) {
                byteList.add(buffer);
                byteLength.add(length);
                totalLength += length;
                buffer = new byte[10240];
            }
            http.disconnect();
            byte [] all;
            all = new byte[totalLength];
            totalLength = 0;
            while(byteList.size() != 0) {
                System.arraycopy(byteList.get(0), 0, all, totalLength, byteLength.get(0));
                totalLength += byteLength.get(0);
                byteList.remove(0);
                byteLength.remove(0);
            }
            File f = new File(fileP + url.replaceAll("/", "\\"));
            //文件存在，不重复下载
            if(f.exists()){
                System.out.println(f.getAbsoluteFile() + " 存在");
                return;
            }
            f.createNewFile();
            FileOutputStream fos = new FileOutputStream(f, false);
            fos.write(all);
            fos.flush();
            fos.close();
        } else {
            GetFile(url);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

ЭлементБыстрый старт

Шаг 1: Представляем файл Vue.js
Шаг 2: Воляelement-uiКаталог помещается в основной каталог веб-проекта (т. е. веб-приложения), а затем импортируется.element-uicss, js файлы
- Представляем локальные CSS- и js-файлы Element.
```

<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script src="element-ui/lib/index.js"></script>
1
2
3
4
```
- Представьте файлы css и js удаленного элемента.
```

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
1
2
3
4
```
Шаг 3: Создайте основные объекты Vue (подробности см. в разделе Vue).
Шаг 4： ЭлементОфициальный веб-сайтСкопируйте код компонента Element

Базовый код структуры HTML-страницы выглядит следующим образом:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码并做对应设计更改-->
            
        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app"
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Полный пример кода выглядит следующим образом

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码 : 以button按钮为例-->
            <el-row>
                <el-button round>圆角按钮</el-button>
                <el-button type="primary" round>主要按钮</el-button>
                <el-button type="success" round>成功按钮</el-button>
                <el-button type="info" round>信息按钮</el-button>
                <el-button type="warning" round>警告按钮</el-button>
                <el-button type="danger" round>危险按钮</el-button>
            </el-row>
        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app"
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

После того, как браузер откроет html-файл, страница выглядит следующим образом

Вставьте сюда описание изображения

Расположение элементов

Макет макета

Вставьте сюда описание изображения

Определение. Быстро и легко создавайте макеты с помощью базового 24-колоночного шаблона.
Объяснение: будет предоставлено много строк, каждая строка имеет 24 базовых сетки.
- Как показано на фиг.
  - В первом ряду только одна сетка, но эта сетка занимает ширину 24 базовых сеток.
  - Во втором ряду две ячейки, каждая занимает ширину 12 базовых ячеек.
  - То же самое касается следующих нескольких строк.

шаг:

Шаг 1. Представьте файл vue.js, файл index.css элемента и файл index.js.
Шаг 2. Создайте основной объект Vue.

Шаг 3. Скопируйте нужный код компонента с официального сайта.

идтиНайдите компонент Layout на официальном сайте., взяв в качестве примера базовый макет, мы обнаружили, что официальный код включает в себя код html и код css, а именно:
<style>Тело тега представляет собой код в стиле CSS, который мы можем внедрить извне или записать непосредственно на html-страницу.

<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

Полный пример кода

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--head标签体内放入css样式代码-->
        <style>
            .el-row {
                margin-bottom: 20px;
                &:last-child {
                    margin-bottom: 0;
                }
            }
            .el-col {
                border-radius: 4px;
            }
            .bg-purple-dark {
                background: #99a9bf;
            }
            .bg-purple {
                background: #d3dce6;
            }
            .bg-purple-light {
                background: #e5e9f2;
            }
            .grid-content {
                border-radius: 4px;
                min-height: 36px;
            }
            .row-bg {
                padding: 10px 0;
                background-color: #f9fafc;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
            </el-row>
            <el-row>
                <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
            <el-row>
                <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
            <el-row>
                <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app"
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

Откройте html-страницу через браузер, скриншот такой

Вставьте сюда описание изображения

Контейнер макета контейнера

Вставьте сюда описание изображения

Определение: компонент-контейнер, используемый для макета, чтобы облегчить быстрое создание базовой структуры страницы.
Пояснение: Как показано на рисунке выше, это макет с левой панелью навигации.

шаг:

Шаг 1. Представьте файл vue.js, файл index.css элемента и файл index.js.
Шаг 2. Создайте основной объект Vue.

Шаг 3. Скопируйте нужный код компонента с официального сайта.

В качестве примера возьмите первый экземпляр, как показано на картинке официального сайта.

В этом примере, помимо кода html и css, есть еще атрибуты объекта Vue, как показано ниже.

<script>
  //export default为自己创建的Vue对象
  export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(20).fill(item)
      }
    }
  };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Мы можем скопировать свойства Vue с официального экземпляра веб-сайта в наш собственный основной объект Vue, как показано ниже.

<script>
    new Vue({
        el : "#app",
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(20).fill(item)
            }
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Полный пример кода

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--head标签体内放入css样式代码-->
        <style>
            .el-header {
                background-color: #B3C0D1;
                color: #333;
                line-height: 60px;
            }

            .el-aside {
                color: #333;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <el-container style="height: 500px; border: 1px solid #eee">
                <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                    <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>导航一</template>
                            <el-menu-item-group>
                                <template slot="title">分组一</template>
                                <el-menu-item index="1-1">选项1</el-menu-item>
                                <el-menu-item index="1-2">选项2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="分组2">
                                <el-menu-item index="1-3">选项3</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="1-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                            <el-menu-item-group>
                                <template slot="title">分组一</template>
                                <el-menu-item index="2-1">选项1</el-menu-item>
                                <el-menu-item index="2-2">选项2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="分组2">
                                <el-menu-item index="2-3">选项3</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="2-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                            <el-menu-item-group>
                                <template slot="title">分组一</template>
                                <el-menu-item index="3-1">选项1</el-menu-item>
                                <el-menu-item index="3-2">选项2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="分组2">
                                <el-menu-item index="3-3">选项3</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="3-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                    </el-menu>
                </el-aside>

                <el-container>
                    <el-header style="text-align: right; font-size: 12px">
                        <el-dropdown>
                            <i class="el-icon-setting" style="margin-right: 15px"></i>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>查看</el-dropdown-item>
                                <el-dropdown-item>新增</el-dropdown-item>
                                <el-dropdown-item>删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <span>王小虎</span>
                    </el-header>

                    <el-main>
                        <el-table :data="tableData">
                            <el-table-column prop="date" label="日期" width="140">
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" width="120">
                            </el-table-column>
                            <el-table-column prop="address" label="地址">
                            </el-table-column>
                        </el-table>
                    </el-main>
                </el-container>
            </el-container>
        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app",
                data() {
                    const item = {
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    };
                    return {
                        tableData: Array(20).fill(item)
                    }
                }
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

Откройте html-страницу через браузер, скриншот такой

Вставьте сюда описание изображения

Корпус элемента

Сделайте эффект, как показано ниже.

Вставьте сюда описание изображения

Примечание. Каждый шаг этого дела загружен в Gitee и может бытьСкачать самостоятельно

Компонент таблицы элементов

Шаг 1: Зайдите на официальный сайт и скопируйте соответствующий пример формы (сОфициальный сайт со статусной формойНапример), код выглядит следующим образом:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->
            <!--表格代码-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName">
                    <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="地址">
                    </el-table-column>
                </el-table>
            </template>
        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app",
                //表格属性
                methods: {
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    }
                },
                data() {
                    return {
                        tableData: [{
                            date: '2016-05-02',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1518 弄',
                        }, {
                            date: '2016-05-04',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1518 弄'
                        }, {
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1518 弄',
                        }, {
                            date: '2016-05-03',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1518 弄'
                        }]
                    }
                }
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

После того, как браузер откроет html-страницу, как показано на рисунке, приступайте к внесению корректировок, получив приблизительную картину.

Вставьте сюда описание изображения

Шаг 2: Добавьте столбцы и данные в таблицу, полученную на шаге 1, и измените имена столбцов.

удалитьwidthШирина каждого столбца автоматически регулируется после атрибута.
Центрируйте содержимое таблицы: прокрутите вниз соответствующий раздел компонента таблицы на официальном сайте, чтобы найти соответствующие методы и свойства, как показано на рисунке.Установить свойстваalign="center"

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->
            <!--表格代码-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            label="排序"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="当前状态"
                            align="center">
                    </el-table-column>
                </el-table>
            </template>
        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app",
                //表格属性
                methods: {
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    }
                },
                data() {
                    return {
                        tableData: [{
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }]
                    }
                }
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

Вставьте сюда описание изображения

Шаг 3: Добавьте столбец действия в таблицу

В столбце операции есть修改и删除кнопку, перейдите на официальный сайт, чтобы найти соответствующий код кнопки, скопируйте и вставьте его.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->
            <!--表格代码-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            label="排序"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="当前状态"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center">
                        <el-row>
                            <el-button type="primary">修改</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </template>
        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app",
                //表格属性
                methods: {
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    }
                },
                data() {
                    return {
                        tableData: [{
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }]
                    }
                }
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

Вставьте сюда описание изображения

Шаг 4： Добавление серийного номера в таблицу: Найдите на официальном сайте таблицу с серийным номером и скопируйте код добавления серийного номера.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->
            <!--表格代码-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName">
                    <!--给表格添加序号-->
                    <el-table-column
                            type="index">
                    </el-table-column>

                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            label="排序"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="当前状态"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center">
                        <el-row>
                            <el-button type="primary">修改</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </template>
        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app",
                //表格属性
                methods: {
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    }
                },
                data() {
                    return {
                        tableData: [{
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }]
                    }
                }
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

Вставьте сюда описание изображения

Шаг 5： Добавление флажка в таблицу. Найдите таблицу с флажком и скопируйте код флажка.

Поскольку пакетные операции могут выполняться над строкой данных после установки флажка на диаграмме вариантов, таблица должна иметь метод, поэтому, когда мы копируем код флажка, мы также должны скопировать таблицу с флажком Копировать соответствующий метод (не забудьте записать этот метод в основной объект Vue), метод следующий:
```
handleSelectionChange(val) {
    this.multipleSelection = val;
}
1
2
3
```
Этот метод имеет свойствоmultipleSelection, поэтому нам нужно скопировать этот атрибут в наш собственный код. Окончательный полный код выглядит следующим образом:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->
            <!--表格代码-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
                    <!--给表格添加复选框-->
                    <el-table-column
                            type="selection">
                    </el-table-column>
                    <!--给表格添加序号-->
                    <el-table-column
                            type="index">
                    </el-table-column>

                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            label="排序"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="当前状态"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center">
                        <el-row>
                            <el-button type="primary">修改</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </template>
        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app",
                //表格属性
                methods: {
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    },
                    // 复选框选中后执行的方法
                    handleSelectionChange(val) {
                        this.multipleSelection = val;
                    }
                },
                data() {
                    return {
                        multipleSelection: [],
                        tableData: [{
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }]
                    }
                }
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

Вставьте сюда описание изображения

Добавьте вывод в метод флажка и проверьте, работает ли он успешно. Код выглядит следующим образом.
```
handleSelectionChange(val) {
    this.multipleSelection = val;
    console.log(this.multipleSelection)
}
1
2
3
4
```
Открыв страницу в браузере, откройте инструменты разработчика → выберите контроллер консоли, чтобы просмотреть выходные данные, как показано на рисунке.

Компонент формы элемента

Шаг 6： Добавьте форму: Форма на диаграмме случая горизонтальная, поэтому находим аналогичную форму (то есть встроенную форму) на официальном сайте и копируем код. Код выглядит следующим образом.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->

            <!--表单代码-->
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="审批人">
                    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="formInline.region" placeholder="活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

            <!--表格代码-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
                    <!--给表格添加复选框-->
                    <el-table-column
                            type="selection">
                    </el-table-column>
                    <!--给表格添加序号-->
                    <el-table-column
                            type="index">
                    </el-table-column>

                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            label="排序"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="当前状态"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center">
                        <el-row>
                            <el-button type="primary">修改</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </template>
        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app",
                //表格属性
                methods: {
                    // 表单方法
                    onSubmit() {
                        console.log('submit!');
                    },
                    // 复选框选中后执行的方法
                    handleSelectionChange(val) {
                        this.multipleSelection = val;
                        //测试与复选框关联的方法是否成功，测试完成后自行删除即可
                        console.log(this.multipleSelection)
                    },
                    // 表格方法
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    }
                },
                data() {
                    return {
                        // 表单数据
                        formInline: {
                            user: '',
                            region: ''
                        },
                        // 复选框数据
                        multipleSelection: [],
                        // 表格数据
                        tableData: [{
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }]
                    }
                }
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164

Вставьте сюда описание изображения

Шаг7： Измените форму, чтобы она соответствовала диаграмме случаев, код выглядит следующим образом.

При изменении имени формы обязательно измените значение атрибута v-model и значение атрибута в объекте Vue на соответствующее имя.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->

            <!--表单代码-->
            <el-form :inline="true" :model="brand" class="demo-form-inline">

                <el-form-item label="当前状态">
                    <el-select v-model="brand.status" placeholder="当前状态">
                        <el-option label="1" value="启用"></el-option>
                        <el-option label="0" value="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业名称">
                    <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
                </el-form-item>
                <el-form-item label="品牌名称">
                    <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

            <!--表格代码-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
                    <!--给表格添加复选框-->
                    <el-table-column
                            type="selection">
                    </el-table-column>
                    <!--给表格添加序号-->
                    <el-table-column
                            type="index">
                    </el-table-column>

                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            label="排序"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="当前状态"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center">
                        <el-row>
                            <el-button type="primary">修改</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </template>
        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app",
                //表格属性
                methods: {
                    // 表单方法
                    onSubmit() {
                        console.log(this.brand);
                    },
                    // 复选框选中后执行的方法
                    handleSelectionChange(val) {
                        this.multipleSelection = val;
                        //测试与复选框关联的方法是否成功，测试完成后自行删除即可
                        console.log(this.multipleSelection)
                    },
                    // 表格方法
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    }
                },
                data() {
                    return {
                        // 表单数据
                        brand: {
                            status: '',
                            companyName: '',
                            brandName: ''
                        },
                        // 复选框数据
                        multipleSelection: [],
                        // 表格数据
                        tableData: [{
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }]
                    }
                }
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170

Вставьте сюда описание изображения

Диалоговые окна и формы элементов

Вставьте сюда описание изображения

Диалоговые окна и формы всплывают при нажатии кнопки «Добавить», поэтому нам нужно добавить их перед созданием диалоговых окон и форм.批量删除и新增две кнопки

Шаг 8： добавить в批量删除и新增кнопка, добавить диалог

Найдите компонент диалогового окна на официальном сайте. Здесь мы возьмем базовое использование диалогового окна в качестве примера и скопируем его код.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->

            <!--表单代码-->
            <el-form :inline="true" :model="brand" class="demo-form-inline">
                <el-form-item label="当前状态">
                    <el-select v-model="brand.status" placeholder="当前状态">
                        <el-option label="1" value="启用"></el-option>
                        <el-option label="0" value="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业名称">
                    <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
                </el-form-item>
                <el-form-item label="品牌名称">
                    <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

            <!--批量删除和新增按钮-->
            <el-row>
                <el-button type="danger" plain>批量删除</el-button>
                <el-button type="primary">新增</el-button>
            </el-row>

            <!--要弹出的对话框-->
            <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose"><!--before-close是为右上角x绑定方法用的属性-->
                <!--对话框中的表单-->
                
                <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>

            <!--表格代码-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
                    <!--给表格添加复选框-->
                    <el-table-column
                            type="selection">
                    </el-table-column>
                    <!--给表格添加序号-->
                    <el-table-column
                            type="index">
                    </el-table-column>

                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            label="排序"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="当前状态"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center">
                        <el-row>
                            <el-button type="primary">修改</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </template>
        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app",
                //表格属性
                methods: {
                    // 表单方法
                    onSubmit() {
                        // 测试是否绑定成功：输出到浏览器控制台测试是否将表单数据封装到brand对象中
                        console.log(this.brand);
                    },
                    // 单击对话框右上角x时会弹出的确认关闭框，若不想要将其删除即可
                    handleClose(done) {
                        this.$confirm('确认关闭？')
                            .then(_ => {
                                done();
                            })
                            .catch(_ => {});
                    },
                    // 复选框选中后执行的方法
                    handleSelectionChange(val) {
                        this.multipleSelection = val;
                        //测试与复选框关联的方法是否成功，测试完成后自行删除即可
                        console.log(this.multipleSelection)
                    },
                    // 表格方法
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    }
                },
                data() {
                    return {
                        // 表单数据
                        brand: {
                            status: '',
                            companyName: '',
                            brandName: ''
                        },
                        // 添加数据的对话康初始状态太是否展示
                        dialogVisible: false,
                        // 复选框数据
                        multipleSelection: [],
                        // 表格数据
                        tableData: [{
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }]
                    }
                }
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200

Вставьте сюда описание изображения

Шаг 9： Добавьте форму в диалоговое окно, код следующий

Найдите компонент формы на официальном сайте и измените его.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->

            <!--表单代码-->
            <el-form :inline="true" :model="brand" class="demo-form-inline">
                <el-form-item label="当前状态">
                    <el-select v-model="brand.status" placeholder="当前状态">
                        <el-option label="1" value="启用"></el-option>
                        <el-option label="0" value="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业名称">
                    <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
                </el-form-item>
                <el-form-item label="品牌名称">
                    <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

            <!--批量删除和新增按钮-->
            <el-row>
                <el-button type="danger" plain>批量删除</el-button>
                <el-button type="primary">新增</el-button>
            </el-row>

            <!--要弹出的对话框-->
            <!--单击事件发生后会将dialogVisible属性值设置为true，此时对话框就会打开-->
            <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
            <el-dialog
                    title="编辑品牌"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose"><!--before-close是为右上角x绑定方法用的属性-->
                <!--对话框中的表单-->
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="品牌名称">
                        <el-input v-model="form.brandName"></el-input>
                    </el-form-item>
                    <el-form-item label="企业名称">
                        <el-input v-model="form.companyName"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="form.ordered"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="form.description"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-switch v-model="form.status"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addBrand">提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>

                <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>

            <!--表格代码-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
                    <!--给表格添加复选框-->
                    <el-table-column
                            type="selection">
                    </el-table-column>
                    <!--给表格添加序号-->
                    <el-table-column
                            type="index">
                    </el-table-column>

                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            label="排序"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="当前状态"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center">
                        <el-row>
                            <el-button type="primary">修改</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </template>
        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app",
                //表格属性
                methods: {
                    // 表单方法
                    onSubmit() {
                        // 测试是否绑定成功：输出到浏览器控制台测试是否将表单数据封装到brand对象中
                        console.log(this.brand);
                    },
                    // 单击对话框右上角x时会弹出的确认关闭框，若不想要将其删除即可
                    handleClose(done) {
                        this.$confirm('确认关闭？')
                            .then(_ => {
                                done();
                            })
                            .catch(_ => {});
                    },
                    //弹出的对话康中表单的添加方法
                    addBrand() {

                    },
                    // 复选框选中后执行的方法
                    handleSelectionChange(val) {
                        this.multipleSelection = val;
                        //测试与复选框关联的方法是否成功，测试完成后自行删除即可
                        console.log(this.multipleSelection)
                    },
                    // 表格方法
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    }
                },
                data() {
                    return {
                        // 表单数据
                        brand: {
                            status: '',
                            companyName: '',
                            brandName: ''
                        },
                        // 新增按钮弹出的对话框初始状态是否展示的标记，默认为false
                        dialogVisible: false,
                        form: {
                            brandName: '',
                            companyName: '',
                            ordered: '',
                            description: '',
                            status: false
                        },
                        // 复选框数据
                        multipleSelection: [],
                        // 表格数据
                        tableData: [{
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }]
                    }
                }
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233

Вставьте сюда описание изображения

Шаг 10： Шаги следующие, а код следующий.

Давать新增Событие привязки кнопки при нажатии, пока один щелчок新增Кнопка вызывает диалоговое окно
Измените форму, которая поставляется с ним提交Метод, соответствующий событию щелчка, связанному с кнопкой: измените метод наaddBrand, пока нажата кнопка, диалоговое окно автоматически отправляется.
Диалоговое окно поставляется с确定、取消кнопка удалить
Поставляется с формой取消Кнопка привязана к событию щелчка. Пока кнопка нажата, диалоговая форма исчезает.
Модель, привязанная к форме,form(Прямо сейчасmodel="form"), измените значение его атрибута наbrandи заполните данные в объекте бренда
Установите переключатель статуса на 0 или 1: найдите соответствующий компонент переключателя на официальном сайте, а затем установите значение атрибута на 0 или 1 в соответствии с соответствующими атрибутами.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->

            <!--表单代码-->
            <el-form :inline="true" :model="brand" class="demo-form-inline">
                <el-form-item label="当前状态">
                    <el-select v-model="brand.status" placeholder="当前状态">
                        <el-option label="1" value="启用"></el-option>
                        <el-option label="0" value="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业名称">
                    <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
                </el-form-item>
                <el-form-item label="品牌名称">
                    <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

            <!--批量删除和新增按钮-->
            <el-row>
                <el-button type="danger" plain>批量删除</el-button>
                <!--新增按钮绑定单击事件：只要一单击`新增`按钮就弹出对话框表单-->
                <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
            </el-row>

            <!--要弹出的对话框-->
            <!--单击事件发生后会将dialogVisible属性值设置为true，此时对话框就会打开-->
            <el-dialog
                    title="编辑品牌"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose"><!--before-close是为右上角x绑定方法用的属性-->
                <!--对话框中的表单-->
                <el-form ref="form" :model="brand" label-width="80px">
                    <el-form-item label="品牌名称">
                        <el-input v-model="brand.brandName"></el-input>
                    </el-form-item>
                    <el-form-item label="企业名称">
                        <el-input v-model="brand.companyName"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="brand.ordered"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="brand.description"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <!--将状态开关值设为1、0-->
                        <el-switch v-model="brand.status" active-value="1" inactive-value="0"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addBrand">提交</el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>

            <!--表格代码-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
                    <!--给表格添加复选框-->
                    <el-table-column
                            type="selection">
                    </el-table-column>
                    <!--给表格添加序号-->
                    <el-table-column
                            type="index">
                    </el-table-column>

                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            label="排序"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="当前状态"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center">
                        <el-row>
                            <el-button type="primary">修改</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </template>
        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app",
                //表格属性
                methods: {
                    // 表单方法
                    onSubmit() {
                        // 测试是否绑定成功：输出到浏览器控制台测试是否将表单数据封装到brand对象中
                        console.log(this.brand);
                    },
                    // 单击对话框右上角x时会弹出的确认关闭框，若不想要将其删除即可
                    handleClose(done) {
                        this.$confirm('确认关闭？')
                            .then(_ => {
                                done();
                            })
                            .catch(_ => {});
                    },
                    //弹出的对话框中单击提交按钮后表单的添加方法
                    addBrand() {
                        console.log(this.brand);
                    },
                    // 复选框选中后执行的方法
                    handleSelectionChange(val) {
                        this.multipleSelection = val;
                        //测试与复选框关联的方法是否成功，测试完成后自行删除即可
                        console.log(this.multipleSelection)
                    },
                    // 表格方法
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    }
                },
                data() {
                    return {
                        // 品牌模型数据
                        brand: {
                            id: '',
                            brandName: '',
                            companyName: '',
                            status: '',
                            ordered: '',
                            description: ''
                        },
                        // 新增按钮弹出的对话框初始状态是否展示的标记，默认为false
                        dialogVisible: false,
                        form: {
                            brandName: '',
                            companyName: '',
                            ordered: '',
                            description: '',
                            status: false
                        },
                        // 复选框数据
                        multipleSelection: [],
                        // 表格数据
                        tableData: [{
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }]
                    }
                }
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233

Вставьте сюда описание изображения

Панель инструментов разбиения на страницы элементов

Шаг 11： Перейдите на официальный сайт, чтобы найти компонент подкачки, скопируйте соответствующий код и внесите соответствующие изменения. Код выглядит следующим образом:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->

            <!--表单代码-->
            <el-form :inline="true" :model="brand" class="demo-form-inline">
                <el-form-item label="当前状态">
                    <el-select v-model="brand.status" placeholder="当前状态">
                        <el-option label="1" value="启用"></el-option>
                        <el-option label="0" value="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业名称">
                    <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
                </el-form-item>
                <el-form-item label="品牌名称">
                    <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

            <!--批量删除和新增按钮-->
            <el-row>
                <el-button type="danger" plain>批量删除</el-button>
                <!--新增按钮绑定单击事件：只要一单击`新增`按钮就弹出对话框表单-->
                <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
            </el-row>

            <!--要弹出的对话框-->
            <!--单击事件发生后会将dialogVisible属性值设置为true，此时对话框就会打开-->
            <el-dialog
                    title="编辑品牌"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose"><!--before-close是为右上角x绑定方法用的属性-->
                <!--对话框中的表单-->
                <el-form ref="form" :model="brand" label-width="80px">
                    <el-form-item label="品牌名称">
                        <el-input v-model="brand.brandName"></el-input>
                    </el-form-item>
                    <el-form-item label="企业名称">
                        <el-input v-model="brand.companyName"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="brand.ordered"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="brand.description"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <!--将状态开关值设为1、0-->
                        <el-switch v-model="brand.status" active-value="1" inactive-value="0"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addBrand">提交</el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>

            <!--表格代码-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
                    <!--给表格添加复选框-->
                    <el-table-column
                            type="selection">
                    </el-table-column>
                    <!--给表格添加序号-->
                    <el-table-column
                            type="index">
                    </el-table-column>

                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            label="排序"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="当前状态"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center">
                        <el-row>
                            <el-button type="primary">修改</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </template>

            <!--分页代码-->
            <template>
                <div class="block">
                    <!--
                    current-page 当前所在页
                    page-sizes 定义选择每页显示的条数
                    page-size 每页显示的条目数
                    total 设置总共的页面数
                    background 添加背景色
                    -->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="10"
                            background
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="1000">
                    </el-pagination>
                </div>
            </template>

        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app",
                //表格属性
                methods: {
                    // 表单方法
                    onSubmit() {
                        // 测试是否绑定成功：输出到浏览器控制台测试是否将表单数据封装到brand对象中
                        console.log(this.brand);
                    },
                    // 单击对话框右上角x时会弹出的确认关闭框，若不想要将其删除即可
                    handleClose(done) {
                        this.$confirm('确认关闭？')
                            .then(_ => {
                                done();
                            })
                            .catch(_ => {});
                    },
                    //弹出的对话框中单击提交按钮后表单的添加方法
                    addBrand() {
                        console.log(this.brand);
                    },
                    // 复选框选中后执行的方法
                    handleSelectionChange(val) {
                        this.multipleSelection = val;
                        //测试与复选框关联的方法是否成功，测试完成后自行删除即可
                        console.log(this.multipleSelection)
                    },
                    // 表格方法
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    },
                    // 分页方法
                    handleSizeChange(val) {
                        console.log(`每页 ${val} 条`);
                    },
                    // 分页方法
                    handleCurrentChange(val) {
                        console.log(`当前页: ${val}`);
                    }
                },
                data() {
                    return {
                        // 品牌模型数据
                        brand: {
                            id: '',
                            brandName: '',
                            companyName: '',
                            status: '',
                            ordered: '',
                            description: ''
                        },
                        // 新增按钮弹出的对话框初始状态是否展示的标记，默认为false
                        dialogVisible: false,
                        form: {
                            brandName: '',
                            companyName: '',
                            ordered: '',
                            description: '',
                            status: false
                        },
                        // 复选框数据
                        multipleSelection: [],
                        // 表格数据
                        tableData: [{
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }],
                        // 分页数据：当前所在页
                        currentPage: 4
                    }
                }
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267

Вставьте сюда описание изображения

Обмен технологиями