element-plus [Feature Request] 希望 useDialog 的实现

pexxcrt2 于 4个月前发布在其他

关注(0)|答案(2)|浏览(52)

Existing Component

Component Name

el-dialog

Description

推荐实现 https://element-plus.org/zh-CN/component/dialog.html 的 useDialog 的实现，使用 useDialog 方法来调用弹出框，而不是一直都是

<el-dialog v-model="dialogTableVisible" title="Shipping address" width="800">
    <el-table :data="gridData">
      <el-table-column property="date" label="Date" width="150" />
      <el-table-column property="name" label="Name" width="200" />
      <el-table-column property="address" label="Address" />
    </el-table>
  </el-dialog>

直接写 DOM，隔壁 Ant Design Vue 已经实现，我也实现了一版 https://github.com/Not-have/micro-tools/tree/main/packages-vue/vue-components-el-extra

element-plus

来源：https://github.com/element-plus/element-plus/issues/17542

2条答案

按热度按时间

qoefvg9y1#

如果是简单的内容，可以使用 ElMessageBox 实现类似的效果，只是一个 demo

import { h } from 'vue';
import { ElMessageBox, ElDivider, ElTable } from 'element-plus';

const attrs = {};
const columns = [];

const message = () =>
  h('div', { style: 'display: flex;flex-direction: column;' }, [
    h(ElDivider, { style: { marginBottom: '5px' } }),
    h(
      ElTable,
      {
        ...attrs,
        columns
      },
      slots
    )
]);

ElMessageBox({
  message
});

赞(0）回复(0）举报 4个月前

ntjbwcob2#

但是稍微复杂一下，就比较麻烦了，而且这样写起来工作量和维护性有些差了在 2024年7月29日，18:23，知晓同丶 ***@***.***> 写道：如果是简单的内容，可以使用ElMessageBox实现类似的效果，只是一个demo import { h } from 'vue'; import { ElMessageBox, ElDivider, ElTable } from 'element-plus'; const attrs = {}; const columns = []; const message = () => h('div', { style: 'display: flex;flex-direction: column;' }, [ h(ElDivider, { style: { marginBottom: '5px' } }), h( ElTable, { ...attrs, columns }, slots ) ]); ElMessageBox({ message }); —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

赞(0）回复(0）举报 4个月前

我来回答

element-plus [Feature Request] 希望 useDialog 的实现

Existing Component

Component Name

Description

2条答案

相关问题

热门标签

最新问答