VUE学习笔记(六)

标签：VUE const name tableRow value 学习 axios 笔记 import

数据添加、修改、watch监听和删除

数据添加

AddCategory.vue

<template>

    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500" :before-close="handleClose">
        <el-form :model="ruleFroms" label-width="auto" style="max-width: 600px">
            <el-form-item label="分类名称">
                <el-input v-model="ruleFroms.name" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addCategory">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import axios from '@/api/api_config';
import { reactive, toRefs } from 'vue'
import { ElMessage } from 'element-plus';
///----------------------------------

const props = defineProps({
    dialogTitle: {
        type: String,
        default: 'AddCategory'
    }
})
const state = reactive({
    dialogVisible: false,
    ruleFroms: {
        id: '',
        name: ''
    },
})
///----------------------------------
//打开对话框
const dialogCategory = () => {
    state.dialogVisible = true;

}
//提交修改或者添加
const addCategory = () => {
    if (props.dialogTitle == "添加分类") {
        let param = {
            name: ruleFroms.value.name
        }
        axios.post('/category', param).then(() => {
            state.dialogVisible = false
            ElMessage.success('添加成功')
        })
    }
}


//解构
const { dialogVisible, ruleFroms } = toRefs(state)


//主动暴露给父组件，编译器的宏命令,不需要引入
defineExpose({
    dialogCategory
})

</script>

数据修改，watch监听

Category.vue

<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>商品分类</span>
                <el-button type="primary" icon="CirclePlus" round @click="handleDialog()">添加分类</el-button>
            </div>
        </template>
        <el-table :data="tableData.list" stripe style="width: 100%">
            <el-table-column prop="id" label="Id" width="180" />
            <el-table-column prop="name" label="名称" width="180" />
            <el-table-column fixed="right" label="操作" width="180">
                <template #default="scope">
                    <el-button type="success" size="small" @click="handleDialog(scope.row)">
                        修改
                    </el-button>
                    <el-button type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

    </el-card>
    <AddCategoryVue ref="addCategoryRef" :dialogTitle="dialogTitle" :tableRow="tableRow"></AddCategoryVue>
</template>

<script setup>

import { onMounted, reactive, ref } from 'vue'
import axios from "@/api/api_config.js"

import AddCategoryVue from '@/components/AddCategory.vue'
import { isNull } from '@/utils/filter.js'

///----------------------------------
const tableData = reactive({ list: [] })
const addCategoryRef = ref(null)//获取子组件实例
const dialogTitle = ref("")//对话框标题
const tableRow = ref({})
///----------------------------------

onMounted(() => {
    getList()
})

//获取分类信息
const getList = () => {
    return axios.get('/category').then((res) => {
        tableData.list = res.data
    })
}

//打开分类页
const handleDialog = (row) => {
    if (isNull(row)) {
        dialogTitle.value = "添加分类"
    } else {
        dialogTitle.value = "修改分类"
        tableRow.value = row
    }

    addCategoryRef.value.dialogCategory()//调用子组件方法

}

</script>

AddCategory.vue

<template>

    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500" :before-close="handleClose">
        <el-form :model="ruleFroms" label-width="auto" style="max-width: 600px">
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="ruleFroms.name" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addCategory">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import axios from '@/api/api_config';
import { reactive, toRefs, watch } from 'vue'
import { ElMessage } from 'element-plus';
///----------------------------------

const props = defineProps({
    dialogTitle: {
        type: String,
        default: 'AddCategory'
    },
    tableRow: {
        type: Object
    }
})
const state = reactive({
    dialogVisible: false,
    ruleFroms: {
        id: '',
        name: ''
    },
})
//监听器
watch(
    //需要监控的数据
    () => props.tableRow,
    //检测到变化后需要做的事情
    () => {
        state.ruleFroms = props.tableRow;
    },
    //配置
    { deep: true, immediate: true }
)
///----------------------------------
//打开对话框
const dialogCategory = () => {
    state.dialogVisible = true;

}
//提交修改或者添加
const addCategory = () => {
    if (props.dialogTitle == "添加分类") {
        let param = {
            name: ruleFroms.value.name
        }
        axios.post('/category', param).then(() => {
            state.dialogVisible = false
            ElMessage.success('添加成功')
        })
    } else {
        console.log("id", props.tableRow.id)
        console.log("name", ruleFroms.value.name)

        let param = {
            id: props.tableRow.id,
            name: ruleFroms.value.name
        }
        axios.put('/category', param).then(() => {
            state.dialogVisible = false
            ElMessage.success('修改成功')
        })
    }
}


//解构
const { dialogVisible, ruleFroms } = toRefs(state)


//主动暴露给父组件，编译器的宏命令,不需要引入
defineExpose({
    dialogCategory
})

</script>

删除操作

Category.vue

<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>商品分类</span>
                <el-button type="primary" icon="CirclePlus" round @click="handleDialog()">添加分类</el-button>
            </div>
        </template>
        <el-table :data="tableData.list" stripe style="width: 100%">
            <el-table-column prop="id" label="Id" width="180" />
            <el-table-column prop="name" label="名称" width="180" />
            <el-table-column fixed="right" label="操作" width="180">
                <template #default="scope">
                    <el-button type="success" size="small" @click="handleDialog(scope.row)">
                        修改
                    </el-button>
                    <el-button type="danger" size="small" @click="open(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

    </el-card>
    <AddCategoryVue ref="addCategoryRef" :dialogTitle="dialogTitle" :tableRow="tableRow"></AddCategoryVue>
</template>

<script setup>

import { onMounted, reactive, ref } from 'vue'
import axios from "@/api/api_config.js"
import { ElMessage, ElMessageBox } from 'element-plus'
import AddCategoryVue from '@/components/AddCategory.vue'
import { isNull } from '@/utils/filter.js'

///----------------------------------
const tableData = reactive({ list: [] })
const addCategoryRef = ref(null)//获取子组件实例
const dialogTitle = ref("")//对话框标题
const tableRow = ref({})
///----------------------------------

onMounted(() => {
    getList()
})

//获取分类信息
const getList = () => {
    return axios.get('/category').then((res) => {
        tableData.list = res.data
    })
}

//打开分类页
const handleDialog = (row) => {
    if (isNull(row)) {
        dialogTitle.value = "添加分类"
    } else {
        dialogTitle.value = "修改分类"
        tableRow.value = row
    }

    addCategoryRef.value.dialogCategory()//调用子组件方法

}

const open = (id) => {
    ElMessageBox.confirm(
        '确定要删除吗?',
        '信息提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            console.log(id)
            axios.delete(`/Category/${id}`).then(() => {
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                });
                //重新加载数据
                getList();
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}

</script>

标签：VUE,const,name,tableRow,value,学习,axios,笔记,import
From： https://www.cnblogs.com/Lvkang/p/18219599

相关文章

赞助商

阅读排行