master

分支 (1)

管理

管理

master

front-end-development-learning
/
8 品牌列表案例.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>品牌案例</title>
    <!-- 引入vue.js -->
    <script src="./lib/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./lib/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="./lib/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
    <!--element-ui表格-->
    <!--数据绑定要以对象形式绑定-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="ID">
            <el-input v-model="formInline.id" placeholder="请输入id"></el-input>
        </el-form-item>
        <el-form-item label="NAME">
            <el-input v-model="formInline.name" placeholder="请输入name" @keyup.enter="add()"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="add">添加</el-button>
        </el-form-item>
        <el-form-item label="搜索">
            <el-input v-model="formInline.keywords" placeholder="请输入搜索内容"></el-input>
        </el-form-item>

    </el-form>

    <!--element-ui表格-->
    <el-table :data="searchList(formInline.keywords)" stripe style="width: 100%">
        <el-table-column prop="id" label="ID" width="180"></el-table-column>
        <el-table-column prop="name" label="NAME" width="180"></el-table-column>
        <!--注意自定义表格内容，需要插入template标签-->
        <el-table-column label="时间">
            <template slot-scope="scope">
                {{scope.row.ctime|dateFormat}}
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" type="danger"
                           @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>


</div>

</body>
<script>

    // 实例化vue对象
    let vm = new Vue({
        // 绑定对象
        el: '#app',
        data: {
            msg: '汽车品牌添加案例',
            list: [{id: 1, name: "宝马", ctime: (new Date()).toString()},
                   {id: 2, name: "奔驰", ctime: (new Date()).toString()},
                   {id: 3, name: "小马", ctime: (new Date()).toString()},
                   {id: 4, name: "小奔", ctime: (new Date()).toString()},
                   ],
            formInline: {
                name: "",
                id: "",
                keywords:""
            }

        },
        methods: {
            add() {
                //添加车辆品牌
                var car = {id: this.formInline.id, name: this.formInline.name, ctime: (new Date()).toString()}
                this.list.push(car)
                // 添加后清空输入框
                this.formInline.id = this.formInline.name = ''
            },
            handleDelete(index, row) {
                console.log(index, row.ctime)
                // 删除当前项，index返回当前索引，row返回当前行对象
                this.list.splice(index, 1)
            },
            searchList(keywords){
                // 搜索关键字，并返回结果，输出到页面
                //如果keywords为空，那么filter不会过滤，item.name.includes(keywords)能匹配所有数据
                var newList = this.list.filter(item=>{
                    if(item.name.includes(keywords)){
                        return item
                    }
                })
                return newList
            }
        },
        filters: {
            dateFormat: function (dateStr) {
                //新建过滤器，处理日期格式
                var dt = new Date(dateStr)
                // yyyy-mm-dddd
                var y = dt.getFullYear()
                var m = dt.getMonth() + 1
                var d = dt.getDate()
                var hh = dt.getHours()
                var mm = dt.getMinutes()
                var ss = dt.getSeconds()
                return `${y}年${m}月${d}日  ${hh}时:${mm}分:${ss}秒`
            }
        }
    })
</script>
</html>