好的，以下是一个简单的仓库查看的增删改查界面的.
vue文件，使用了
vue3和
element-plus：
```
vue
<template>
<div class="repo-view">
<
el-input v-mod
el="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" lab
el="名称"></
el-
table-column>
<
el-
table-column prop="description" lab
el="描述"></
el-
table-column>
<
el-
table-column prop="language" lab
el="语言"></
el-
table-column>
<
el-
table-column lab
el="操作">
<template #default="{ row }">
<
el-button type="text" @click="editRepo(row)">编辑</
el-button>
<
el-button type="text" @click="d
eleteRepo(row)">删除</
el-button>
</template>
</
el-
table-column>
</
el-
table>
<
el-
dialog :visible.sync="
dialogVisible" title="添加/编辑仓库" :close-on-click-modal="false">
<
el-form :mod
el="repoForm" :rules="repoRules"
ref="repoForm">
<
el-form-item lab
el="名称" prop="name">
<
el-input v-mod
el="repoForm.name"></
el-input>
</
el-form-item>
<
el-form-item lab
el="描述" prop="description">
<
el-input v-mod
el="repoForm.description"></
el-input>
</
el-form-item>
<
el-form-item lab
el="语言" prop="language">
<
el-input v-mod
el="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 d
eleteRepo = (row) => {
ElMessageBox.confirm(`确定删除${row.name}吗？`, '提示', {
confirmButtonText: '确定',
canc
elButtonText: '取消',
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,
d
eleteRepo,
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等。
1700
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
