使用vue3和element-plus 写一个仓库查看的增删改查界面的.vue文件
时间: 2024-04-30 13:18:42 浏览: 12
好的,以下是一个简单的仓库查看的增删改查界面的.vue文件,使用了vue3和element-plus:
```vue
<template>
<div class="repo-view">
<el-input v-model="search" placeholder="搜索仓库"></el-input>
<el-button class="add-btn" type="primary" @click="addRepo">添加仓库</el-button>
<el-table :data="repoList" style="width: 100%">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="description" label="描述"></el-table-column>
<el-table-column prop="language" label="语言"></el-table-column>
<el-table-column label="操作">
<template #default="{ row }">
<el-button type="text" @click="editRepo(row)">编辑</el-button>
<el-button type="text" @click="deleteRepo(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="dialogVisible" title="添加/编辑仓库" :close-on-click-modal="false">
<el-form :model="repoForm" :rules="repoRules" ref="repoForm">
<el-form-item label="名称" prop="name">
<el-input v-model="repoForm.name"></el-input>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model="repoForm.description"></el-input>
</el-form-item>
<el-form-item label="语言" prop="language">
<el-input v-model="repoForm.language"></el-input>
</el-form-item>
</el-form>
<div class="dialog-footer" slot="footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
name: 'RepoView',
setup() {
const repoList = ref([
{ name: 'Vue.js', description: '渐进式 JavaScript 框架', language: 'JavaScript' },
{ name: 'React', description: '用于构建用户界面的 JavaScript 库', language: 'JavaScript' },
{ name: 'Angular', description: '用于构建动态 Web 应用的框架', language: 'TypeScript' },
])
const repoForm = ref({ name: '', description: '', language: '' })
const repoRules = ref({
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
language: [{ required: true, message: '请输入语言', trigger: 'blur' }],
})
const dialogVisible = ref(false)
const search = ref('')
const addRepo = () => {
repoForm.value = { name: '', description: '', language: '' }
dialogVisible.value = true
}
const editRepo = (row) => {
repoForm.value = { ...row }
dialogVisible.value = true
}
const deleteRepo = (row) => {
ElMessageBox.confirm(`确定删除${row.name}吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
const index = repoList.value.indexOf(row)
repoList.value.splice(index, 1)
ElMessage.success('删除成功!')
})
}
const submitForm = () => {
const form = ref.value
form.validate((valid) => {
if (valid) {
if (repoForm.value.name) {
const index = repoList.value.findIndex(r => r.name === repoForm.value.name)
if (index > -1) {
Object.assign(repoList.value[index], repoForm.value)
ElMessage.success('编辑成功!')
} else {
repoList.value.push(repoForm.value)
ElMessage.success('添加成功!')
}
dialogVisible.value = false
}
} else {
return false
}
})
}
return {
repoList,
repoForm,
repoRules,
dialogVisible,
search,
addRepo,
editRepo,
deleteRepo,
submitForm,
}
},
}
</script>
<style scoped>
.repo-view {
margin: 20px;
}
.add-btn {
margin-left: 20px;
}
.dialog-footer {
text-align: center;
}
</style>
```
这个界面包含了一个搜索框、添加按钮、表格和一个编辑/添加仓库的对话框。可以通过搜索框进行搜索,点击添加按钮弹出对话框进行添加,点击表格中的编辑按钮可以进行编辑,点击表格中的删除按钮可以进行删除。同时使用了element-plus中的一些组件,例如Dialog、Form、Table等,也使用了element-plus中的一些提示组件,例如Message、MessageBox等。