element UI 在Table中插入图片,vue模糊查询

基于localstorage的图书管理,使用element UI,实现基本的增删改查功能

首页Home

　　在首页实现模糊查询功能

<template>
    <div class="home">
        <el-row>
            <el-button type="primary" @click="Add">新增</el-button>
        </el-row>
        <!-- <el-input v-model="input" ref="search" placeholder="请输入内容"></el-input> -->
        <el-input
            v-model="search"
            style="display: inline-block; 1300px"
            placeholder="请输入搜索内容"
        >
        </el-input>
        <el-table ref="tableData" :data="tables" style=" 100%" stripe hover>
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="name" label="名称" width="180"></el-table-column>
            <el-table-column prop="img" label="主图" width="180">
                <template slot-scope="scope">
                    <img
                        style="80px; max-heigth: 80px; display: block;margin: 0 auto;"
                        :src="scope.row.img"
                    />
                </template>
            </el-table-column>

            <el-table-column prop="quantity" label="库存" width="180"></el-table-column>
            <el-table-column prop="price" label="价格" width="180"></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: "Home",
    components: {
        // HelloWorld
    },
    data() {
        return {
            search: "",
            tableData: [
                {
                    name: "",
                    img: "",
                    quantity: "",
                    price: "",
                },
            ],
        }
    },
    methods: {
        Add() {
            this.$router.push({
                name: "New",
            })
        },
        handleEdit(index) {
            this.$router.push({
                name: "Edit",
                query: { index },
            })
        },
        handleDelete(index) {
            this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let data = JSON.parse(localStorage.getItem("data"))
                    data.splice(index, 1)
                    localStorage.setItem("data", JSON.stringify(data))
                    this.loadData()
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    })
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    })
                })
        },
        loadData() {
            let data = JSON.parse(localStorage.getItem("data"))
            // this.list = data
            this.tableData = data
        },
    },
    created() {
        this.loadData()
    },
    computed: {
        tables() {
            const search = this.search
            if (search) {
                return this.tableData.filter((data) => {
                    return Object.keys(data).some((key) => {
                        return (
                            String(data[key])
                                .toLowerCase()
                                .indexOf(search) > -1
                        )
                    })
                })
            }
            return this.tableData
        },
    },
}
</script>

新增页New

<template>
    <div class="edit">
        <el-form
            :model="numberValidateForm"
            ref="numberValidateForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item
                prop="name"
                label="名称"
                :rules="[{ required: true, message: '名称不能为空' }]"
            >
                <el-input
                    type="name"
                    v-model.number="numberValidateForm.name"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="主图" prop="img" :rules="[{ required: false }]">
                <el-input
                    type="img"
                    v-model.number="numberValidateForm.img"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="库存" prop="quantity" :rules="[{ required: false }]">
                <el-input
                    type="quantity"
                    v-model.number="numberValidateForm.quantity"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price" :rules="[{ required: false }]">
                <el-input
                    type="price"
                    v-model.number="numberValidateForm.price"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('numberValidateForm')"
                    >提交</el-button
                >
                <el-button @click="resetForm('numberValidateForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            numberValidateForm: {
                name: "",
                img: "",
                quantity: "",
                price: "",
            },
        }
    },
    methods: {
        submitForm() {
            if (this.numberValidateForm.name == "") {
                this.$alert("名称不能为空", {
                    confirmButtonText: "确定",
                })
                return
            }
            let data = JSON.parse(localStorage.getItem("data"))
            if (data) {
                data.push(this.numberValidateForm)
                localStorage.setItem("data", JSON.stringify(data))
            } else {
                this.list.push(this.numberValidateForm)
                localStorage.setItem("data", JSON.stringify(this.list))
            }
            this.$router.push({
                name: "Home",
            })
        },
        resetForm() {
            this.numberValidateForm = []
        },
    },
}
</script>

<style></style>

修改页Edit

<template>
    <div class="edit">
        <el-form
            :model="numberValidateForm"
            ref="numberValidateForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item
                prop="name"
                label="名称"
                :rules="[{ required: true, message: '名称不能为空' }]"
            >
                <el-input
                    type="name"
                    v-model.number="numberValidateForm.name"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="主图" prop="img" :rules="[{ required: false }]">
                <el-input
                    type="img"
                    v-model.number="numberValidateForm.img"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="库存" prop="quantity" :rules="[{ required: false }]">
                <el-input
                    type="quantity"
                    v-model.number="numberValidateForm.quantity"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price" :rules="[{ required: false }]">
                <el-input
                    type="price"
                    v-model.number="numberValidateForm.price"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('numberValidateForm')"
                    >提交</el-button
                >
                <el-button @click="resetForm('numberValidateForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            numberValidateForm: {
                name: "",
                img: "",
                quantity: "",
                price: "",
            },
        }
    },
    methods: {
        loadData() {
            let id = this.$route.query.index
            let data = JSON.parse(localStorage.getItem("data"))
            this.numberValidateForm = data[id]
        },
        submitForm() {
            if (this.numberValidateForm.name == "") {
                this.$alert("名称不能为空", {
                    confirmButtonText: "确定",
                })
                return
            }
            let id = this.$route.query.index
            let data = JSON.parse(localStorage.getItem("data"))
            data.splice(id, 1, this.numberValidateForm)
            localStorage.setItem("data", JSON.stringify(data))
            this.$router.push({
                name: "Home",
            })
        },
        resetForm() {
            this.numberValidateForm = []
        },
    },
    created() {
        this.loadData()
    },
}
</script>

<style></style>

效果图:

 项目GitHub地址:      https://github.com/strongerPian/Book-Set.git