element ui，table的column使用for循环渲染

最新推荐文章于 2024-06-20 20:43:52 发布
最新推荐文章于 2024-06-20 20:43:52 发布
阅读量1.8k 收藏 7
点赞数 8
分类专栏： element vue 文章标签： ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43993121/article/details/135452327
版权

render-header 渲染表头

普通情况—— 一级

html

          <el-table
            border
            class="table-wrap"
            :data="list"
            :header-cell-class-name="() => 'blue-header-row'"
            :header-row-style="{ height: '40px' }"
            highlight-current-row
            :max-height="maxHeight"
            :row-style="{ height: '40px' }"
            :scrollbar-always-on="true"
            show-summary
            size="small"
            :summary-method="getSummaries"
          >
            <el-table-column
              v-for="item in columns"
              :key="item.dataKey"
              align="center"
              :label="item.title"
              :prop="item.dataKey"
              show-overflow-tooltip
              :width="item.width"
            />
          </el-table>

js

    columns: [
          {
            dataKey: 'index',
            title: '序号',
            width: 48,
            cellRenderer: ({ rowIndex }) => h('span', rowIndex + 1),
          },
          {
            dataKey: 'begin_0date',
            title: '日期',
            width: 80,
          },
          {
            dataKey: 'this_renew',
            title: '充值总金额',
            width: 80,
          },
          {
            dataKey: 'this_renew_1',
            title: '现金交费',
            width: 80,
          },
          {
            dataKey: 'this_renew_2',
            title: '线上充值',
            width: 80,
          },
          {
            dataKey: 'this_renew_3',
            title: '因错退还',
            width: 80,
          },
          {
            dataKey: 'this_patch',
            title: '补贴金额',
            width: 80,
          },
          {
            dataKey: 'this_cost',
            title: '消费金额',
            width: 80,
          },
          {
            dataKey: 'retmoney',
            title: '退款金额',
            width: 80,
          },
          {
            dataKey: 'pre_money',
            title: '卡金额',
            width: 80,
          },
        ],

表头层级关系（二层）

在这里插入图片描述

html:

             <el-table
                v-loading="listLoading"
                border
                :data="list"
                :header-cell-class-name="() => 'blue-header-row'"
                :header-row-style="{ height: '40px' }"
                :height="maxHeight"
                highlight-current-row
                :row-style="{ height: '40px' }"
                :scrollbar-always-on="true"
                show-summary
                size="small"
                :summary-method="getSummaries"
              >
                <el-table-column
                  v-for="item in columns"
                  :key="item.dataKey"
                  align="center"
                  :label="item.title"
                  :prop="item.dataKey"
                  :render-header="item.headerCellRenderer"
                  show-overflow-tooltip
                  :width="item.width"
                >
                  <template v-if="item.hasChildren">
                    <el-table-column
                      v-for="_item in item.children"
                      :key="_item.dataKey"
                      align="center"
                      :label="_item.title"
                      :prop="_item.dataKey"
                      :render-header="_item.headerCellRenderer"
                      show-overflow-tooltip
                      :width="_item.width"
                    />
                  </template>
                </el-table-column>
              </el-table>

js

 columns: [
          {
            key: 'index',
            dataKey: 'index',
            title: '序号',
            width: 48,
            align: 'center',
          },
          {
            key: 'typeparentcode',
            dataKey: 'typeparentcode',
            title: '一级分类部门',
            width: 100,
            align: 'center',
            cellRenderer: ({ cellData }) => (
              <text-tooltip
                class="wid100"
                content={cellData}
                ref-name="supplierName"
              />
            ),
          },
          {
            key: 'typecode',
            dataKey: 'typecode',
            title: '二级分类部门',
            width: 100,
            align: 'center',
            cellRenderer: ({ cellData }) => (
              <text-tooltip
                class="wid100"
                content={cellData}
                ref-name="supplierName"
              />
            ),
          },
          {
            key: 'begin_date',
            dataKey: 'begin_date',
            title: '开始日期',
            width: 80,
            align: 'center',
          },
          {
            key: 'end_date',
            dataKey: 'end_date',
            title: '结束日期',
            width: 80,
            align: 'center',
          },
          {
            key: 'pre_money',
            dataKey: 'pre_money',
            title: '期初金额',
            width: 70,
            align: 'center',
            headerCellRenderer: () => (
              <span>
                期初
                <br />
                金额
              </span>
            ),
            cellRenderer: ({ cellData }) => (
              <text-tooltip
                class="wid100"
                content={cellData}
                ref-name="supplierName"
              />
            ),
            // render: (h, param) => {
            //   return param.row.pre_money
            // },
          },
          {
            key: 'renew',
            hasChildren: true,
            title: '充值',
            children: [
              {
                key: 'this_renew',
                dataKey: 'this_renew',
                title: '个人',
                width: 70,
                align: 'center',
                cellRenderer: ({ cellData }) => (
                  <text-tooltip
                    class="wid100"
                    content={cellData}
                    ref-name="supplierName"
                  />
                ),
              },
              {
                key: 'this_renew_bt',
                dataKey: 'this_renew_bt',
                title: '补贴',
                width: 70,
                align: 'center',
                cellRenderer: ({ cellData }) => (
                  <text-tooltip
                    class="wid100"
                    content={cellData}
                    ref-name="supplierName"
                  />
                ),
              },
            ],
          },
          {
            key: 'sum',
            hasChildren: true,
            title: '消费',
            children: [
              {
                key: 'food_sum',
                dataKey: 'food_sum',
                title: '饭堂',
                width: 70,
                align: 'center',
                cellRenderer: ({ cellData }) => (
                  <text-tooltip
                    class="wid100"
                    content={cellData}
                    ref-name="supplierName"
                  />
                ),
              },
              {
                key: 'shop_sum',
                dataKey: 'shop_sum',
                title: '小卖部',
                width: 70,
                align: 'center',
                cellRenderer: ({ cellData }) => (
                  <text-tooltip
                    class="wid100"
                    content={cellData}
                    ref-name="supplierName"
                  />
                ),
              },
            ],
          },
          {
            key: 'retmoney_sum',
            hasChildren: true,
            title: '退款',
            children: [
              {
                key: 'retmoney',
                dataKey: 'retmoney',
                title: '个人',
                width: 70,
                align: 'center',
                cellRenderer: ({ cellData }) => (
                  <text-tooltip
                    class="wid100"
                    content={cellData}
                    ref-name="supplierName"
                  />
                ),
              },
              {
                key: 'retmoney_bt',
                dataKey: 'retmoney_bt',
                title: '补贴',
                width: 70,
                align: 'center',
                cellRenderer: ({ cellData }) => (
                  <text-tooltip
                    class="wid100"
                    content={cellData}
                    ref-name="supplierName"
                  />
                ),
              },
            ],
          },
          {
            key: 'this_remain',
            dataKey: 'this_remain',
            title: '期末金额',
            width: 70,
            align: 'center',
            headerCellRenderer: () => (
              <span>
                期末
                <br />
                金额
              </span>
            ),
            cellRenderer: ({ cellData }) => (
              <text-tooltip
                class="wid100"
                content={cellData}
                ref-name="supplierName"
              />
            ),
          },
          {
            key: 'one_count',
            dataKey: 'one_count',
            title: '早餐次数',
            width: 70,
            align: 'center',
            headerCellRenderer: () => (
              <span>
                早餐
                <br />
                次数
              </span>
            ),
            cellRenderer: ({ cellData }) => (
              <text-tooltip
                class="wid100"
                content={cellData}
                ref-name="supplierName"
              />
            ),
          },
          {
            key: 'one_sum',
            dataKey: 'one_sum',
            title: '早餐金额',
            width: 70,
            align: 'center',
            headerCellRenderer: () => (
              <span>
                早餐
                <br />
                金额
              </span>
            ),
            cellRenderer: ({ cellData }) => (
              <text-tooltip
                class="wid100"
                content={cellData}
                ref-name="supplierName"
              />
            ),
          },
          {
            key: 'two_count',
            dataKey: 'two_count',
            title: '午餐次数',
            width: 70,
            align: 'center',
            headerCellRenderer: () => (
              <span>
                午餐
                <br />
                次数
              </span>
            ),
            cellRenderer: ({ cellData }) => (
              <text-tooltip
                class="wid100"
                content={cellData}
                ref-name="supplierName"
              />
            ),
          },
          {
            key: 'two_sum',
            dataKey: 'two_sum',
            title: '午餐金额',
            width: 70,
            align: 'center',
            headerCellRenderer: () => (
              <span>
                午餐
                <br />
                金额
              </span>
            ),
            cellRenderer: ({ cellData }) => (
              <text-tooltip
                class="wid100"
                content={cellData}
                ref-name="supplierName"
              />
            ),
          },
          {
            key: 'three_count',
            dataKey: 'three_count',
            title: '晚餐次数',
            width: 70,
            align: 'center',
            headerCellRenderer: () => (
              <span>
                晚餐
                <br />
                次数
              </span>
            ),
            cellRenderer: ({ cellData }) => (
              <text-tooltip
                class="wid100"
                content={cellData}
                ref-name="supplierName"
              />
            ),
          },
          {
            key: 'three_sum',
            dataKey: 'three_sum',
            title: '晚餐金额',
            width: 70,
            align: 'center',
            headerCellRenderer: () => (
              <span>
                晚餐
                <br />
                金额
              </span>
            ),
            cellRenderer: ({ cellData }) => (
              <text-tooltip
                class="wid100"
                content={cellData}
                ref-name="supplierName"
              />
            ),
          },
          {
            key: 'four_count',
            dataKey: 'four_count',
            title: '夜宵次数',
            width: 70,
            align: 'center',
            headerCellRenderer: () => (
              <span>
                夜宵
                <br />
                次数
              </span>
            ),
            cellRenderer: ({ cellData }) => (
              <text-tooltip
                class="wid100"
                content={cellData}
                ref-name="supplierName"
              />
            ),
          },
          {
            key: 'four_sum',
            dataKey: 'four_sum',
            title: '夜宵金额',
            width: 70,
            align: 'center',
            headerCellRenderer: () => (
              <span>
                夜宵
                <br />
                金额
              </span>
            ),
            cellRenderer: ({ cellData }) => (
              <text-tooltip
                class="wid100"
                content={cellData}
                ref-name="supplierName"
              />
            ),
          },
          {
            key: 'cost_sum',
            hasChildren: true,
            title: '总消费(包含小卖部)',
            children: [
              {
                key: 'this_cost',
                dataKey: 'this_cost',
                title: '个人',
                width: 75,
                align: 'center',
                headerCellRenderer: () => <span>个人</span>,
                cellRenderer: ({ cellData }) => (
                  <text-tooltip
                    class="wid100"
                    content={cellData}
                    ref-name="supplierName"
                  />
                ),
              },
              {
                key: 'this_cost_bt',
                dataKey: 'this_cost_bt',
                title: '补贴',
                width: 75,
                align: 'center',
                headerCellRenderer: () => <span>补贴</span>,
                cellRenderer: ({ cellData }) => (
                  <text-tooltip
                    class="wid100"
                    content={cellData}
                    ref-name="supplierName"
                  />
                ),
              },
            ],
          },
          {
            key: 'depmens',
            dataKey: 'depmens',
            title: '部门人数',
            width: 75,
            align: 'center',
            headerCellRenderer: () => (
              <span>
                部门
                <br />
                人数
              </span>
            ),
            cellRenderer: ({ cellData }) => (
              <text-tooltip
                class="wid100"
                content={cellData}
                ref-name="supplierName"
              />
            ),
          },
        ],
葱头的故事
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element的el-table-column循环渲染和自定义列
qq_39842256的博客
02-16 1万+
直接上代码了 // 自定义组件 <template> <div class="x__table> <el-table v-loading="tableLoading" :data="tableData" border stripe> <el-table-column v-if="index" ...
element-plus table循环生成列
qq_44871531的博客
04-02 232
【代码】element-plus table循环生成列。
【vue】element-ui、el-table使用V-for循环动态添加表头和数据
热门推荐
蓝胖子的博客
03-17 1万+
【vue】element-ui、el-table使用V-for循环动态添加表头和数据
ElementUI Form表单里使用 v-for循环创建表单元素校验
最新发布
a123456234的博客
06-20 476
Form表单里的使用 v-for循环创建的表单元素校验
vue element el-table-column 循环示例代码
宁夏前端工程师，马卫斌，wx：1457508895
10-31 3131
如果你想循环生成多个el-table-column，可以使用v-for指令。组件，如果你没有安装Element UI，需要先安装并引入Element UI。
el-table,el-table-column v-for循环时用v-if加key仍然错误的原因
qq_26708001的博客
11-22 3608
el-table,el-table-column v-for循环时用v-if加key仍然错误的原因
el-table 表格内循环
懿_51335316的博客
04-20 1981
el-table 表格内循环。
element el-table-column 循环
weixin_45289656的博客
02-02 5544
element el-table-column 循环
element-ui、el-table使用V-for循环动态添加表头和数据
xz1589155358的博客
08-30 6946
element-ui、el-table使用V-for循环动态添加表头和数据
el-table实现表格合并与v-for多层循环嵌套失效解决办法
丘比特没有箭的博客
11-20 1169
el-table实现表格合并与v-for多层循环嵌套失效解决办法
element-ui el-table表格动态v-for渲染表格
weixin_44021888的博客
06-16 5047
elementui el-table根据返回数据for循环并显示
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
12-29
先看看ElementUI里关于el-table的template数据结构： <el-table-
使用 Element UI Table 的 slot-scope方法
10-16
在 Element UI 中，Table 组件是一个常用的展示数据的组件，它提供了许多自定义功能，其中包括 `slot-scope` 方法。`slot-scope` 在 Vue.js 2.x 版本中用于将子组件的数据传递给父组件，但在 Vue.js 3.x 中已被 `v-...
element-ui table组件如何使用render属性的实现
01-19
在使用 element-ui table组件时，由于表列比较多一个个写特别麻烦，所以想通过将所有表头定义成一个数组，通过遍历多方式去实现。这样解决了手写很多 el-table-column 的情况。 障碍： 类似于下面自定义表列的样式，...
监听element-ui table滚动事件的方法
10-17
当使用Element-UI的`el-table`组件时，监听滚动事件可以帮助我们实现无限滚动加载，即用户滚动到表格底部时自动加载下一页数据。 ### 方法 1. **设置表格基础结构** 首先，我们需要创建一个包含`el-table`的Vue模板...
element ui table编辑（作用域插槽）
09-17
Element UI 是一个基于 Vue.js 的开源 UI 组件库，提供了丰富的界面组件，包括表格（Table）。在 Element UI 的表格组件中，"作用域插槽"（Scoped Slot）是一种自定义列模板的方式，允许用户对表格的列内容进行高度...
vue element 中的table动态渲染实现（动态表头）
10-15
总的来说，Vue Element中的`el-table`组件提供了强大的动态渲染能力，通过灵活地配置`props`和使用各种内置属性，我们可以轻松实现复杂的数据展示需求，同时保持代码的清晰和简洁。通过深入理解这些特性，开发者可以...
vue循环渲染element-ui中table内容
m0_60540878的博客
08-31 5006
当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。 相当于是要枚举出所有需要展示的参数，这种情况在参数比较少的情况下是比较方便的，但是在有很多数据或者参数不确定的情况下，这种枚举的方式就不太适合了。 <template> <el-table :data="tableData" style="width: 10
element ui table v-for循环
03-16
element ui table组件可以使用v-for循环来渲染表格数据。通过在table组件中使用v-for指令，可以将数据数组中的每个对象渲染为一行表格数据。同时，可以使用table-column组件来定义每列的数据和样式。例如： <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> 其中，tableData是一个包含多个对象的数组，每个对象包含name、age和gender属性。prop属性指定了每列对应的数据属性，label属性指定了列的标题。通过这种方式，可以使用v-for循环来动态渲染表格数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值