EasyUI DataGrid(数据表格) 表头、内容自定义

Hello.鑫

已于 2023-04-19 10:34:24 修改

阅读量800

点赞数

文章标签： easyui 前端 DataGrid 插槽 vue

于 2023-04-19 08:50:39 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44037153/article/details/130235439

版权

本文展示了如何在DataGrid组件中进行数据绑定，设置为非分页模式，并详细说明了GridColumn的配置，包括字段设置、对齐方式和宽度调整。同时，提到了自定义header和body模板的使用，强调了项目名称列的重要性和样式设定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：DataGrid的data绑定的是你自己的数据

<DataGrid
 :data="XXXX"
  :pagination="false"
>
  <GridColumn field="mc" halign="center" align="left" width="28">
    <template slot="header">
      <div style="display: inline-flex">
        <span class="title-red">*</span>
        <span>项目名称</span>
      </div>
    </template>
    <template slot="body" slot-scope="scope">
      ****************
    </template>
  </GridColumn>
 </DataGrid>