参考给定引用中未直接提及在
Element UI的`
$confirm`
弹出框中渲染表格的方法。不过可以结合
Element UI的特性
和一般
前端开发思路来实现。
要在`
$confirm`
弹出框中渲染表格，可借助`this.$create
Element`方法创建表格元素并将其作为`message`内容传入`
$confirm`。以下是示例代码：
```
vue
<template>
<div>
<button @click="showConfirmWithTable">显示带表格的
确认框</button>
</div>
</template>
<script>
export default {
methods: {
showConfirmWithTable() {
const tableData = [
{ date: '2024
-01
-01', name: '张三', address: '北京市' },
{ date: '2024
-01
-02', name: '李四', address: '上海市' },
{ date: '2024
-01
-03', name: '王五', address: '广州市' }
];
const h = this.$create
Element;
const tableHeader = h('thead', [
h('tr', [
h('th', '日期'),
h('th', '姓名'),
h('th', '地址')
])
]);
const tableRows = tableData.map(item => {
return h('tr', [
h('td', item.date),
h('td', item.name),
h('td', item.address)
]);
});
const tableBody = h('tbody', tableRows);
const table = h('table', {
style: {
borderCollapse: 'collapse',
width: '100%'
}
}, [tableHeader, tableBody]);
this.
$confirm('以下是表格数据', {
title: '提示',
message: h('div', null, [table]),
confirmButtonText: '
确定',
cancelButtonText: '
取消',
center: true
}).then(() => {
//
确认后的逻辑
}).catch(() => {
//
取消后的逻辑
});
}
}
};
</script>
```
在上述代码里，先定义了表格数据`tableData`，接着使用`this.$create
Element`创建表格的表头`tableHeader`
和表体`tableBody`，再将它们组合成完整的表格`table`。最后把表格作为`message`内容传入`
$confirm`，从而在
弹出框中渲染表格。
通过修改element-ui的样式类，利用flex布局的row-reverse属性实现$confirm弹出框中确认和取消按钮的位置互换。在app.vue全局文件中进行调整，设置按钮的margin-left以完善布局。
扫一扫
1683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
