接上文
javascript
<template>
<el-table :data="userList" border>、
<el-table-column label="ID" prop="id"></el-table-column>
<el-table-column label="ID" prop="name"></el-table-column>
<el-table-column label="ID" prop="hobby"></el-table-column>
<el-table-column label="ID" prop="age"></el-table-column>
<el-table-column>
<template #default="scope">
<el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
const userList = ref([])
const getUserList = () => {
//将来会修改为从数据库中获取数据
const data = [{
id: 1,
name: 'Tom',
hobby: 'play Jerry',
age: 8
}, {
id: 2,
name: 'Jerry',
hobby: 'play Spike',
age: 7
}, {
id: 3,
name: 'Spike',
hobby: 'play Tom',
age: 6
}]
userList.value = data
}
onMounted(() => getUserList())
const handleEdit = (r: Object) => {
console.log(r)
}
const handleDelete = (r: Object) => {
console.log(r)
}
</script>
dialog对话框的用法
dialog对话框可以根据v-model属性来控制显示和隐藏。首次按定义一个响应式变量dialogflag,默认值为true。
javascript
let dialogflag = ref(true)
在模板中写一个dialog标签,注意不要写在表格里。
javascript
<el-dialog v-model="dialogflag" title="修改数据">
</el-dialog>
此时运行代码会发现页面中出现了一个对话框,效果如下
如果将dialogflag的值改为false则对话框会隐藏起来。
控制对话框的隐藏和显示
dialogflag是响应式的数据,只要修改了dialog的值那dialog上的v-model标签的值也会随之变化,如此只要在编辑按钮上绑定一个修改dialogflag的函数即可。我们为已经绑定好的函数中添加这样的代码
javascript
const handleEdit = (r: Object) => {
console.log(r)
dialogflag.value = true
}
此刻可以在弹出框中展示这个对象的值并修改,但是我们这个函数接收到的值并不是列表中的引用而是复制,是独立于userLIst之外的,只是有相同的数据格式而已。
这里我们定义一个变量temprow来接收行中的数据,同时在dialog里写好接收变量的输入框。不要忘了将row的数据同步到tempRow中,否则dialog无法收到数据。
javascript
<el-dialog v-model="dialogflag" title="修改数据">
<el-input v-model="tempRow.id" disabled></el-input>
<el-input v-model="tempRow.name"></el-input>
<el-input v-model="tempRow.hobby"></el-input>
<el-input v-model="tempRow.age"></el-input>
<el-button @click="editUserDo">确认信息</el-button>
<el-button @click="closeDialog">关闭</el-button>
</el-dialog>
const handleEdit = (r: Object) => {
console.log(r)
tempRow.value = r
dialogflag.value = true
}
这样点击修改按钮后就是如下图所示
我们的代码除了输入框还定义了两个按钮,确认信息和关闭,确认信息的作用是将数据保存下来,关闭的作用是取消修改。先实现更好实现的关闭功能:
关闭功能要做两个操作,关闭窗口和清除temprow中的数据,容易实现不再赘述,
javascript
const closeDialog = () => {
dialogflag.value = false
tempRow.value = {}
}
数据更新
数据保存的操作就是将temprow中的数据同步到userList中,userlist变化了页面会同步变化。第一步是找到要修改的值对应行第二部是更新数据,第三步是关闭dialog和将temprow置空。
javascript
const editUserDo = () => {
for (let i = 0; i < userList.value.length; i++) {//第一步
if (userList.value[i].id === tempRow.value.id) {
userList.value[i] = tempRow.value//第二步
break
}
}
closeDialog()//第三步
}