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

最新推荐文章于 2024-06-14 11:07:57 发布
最新推荐文章于 2024-06-14 11:07:57 发布
阅读量1.7k 收藏 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" ...
el-table,el-table-column v-for循环时用v-if加key仍然错误的原因
qq_26708001的博客
11-22 3599
el-table,el-table-column v-for循环时用v-if加key仍然错误的原因
element-plus table循环生成列
qq_44871531的博客
04-02 230
【代码】element-plus table循环生成列。
Element UI 一键校验多表单（v-for循环表单，异步校验规则，v-for 中的 ref 属性，避坑 forEach 不支持异步 await ）
最新发布
朝阳39的博客
06-14 599
所以此例多表单的校验需改用 for 循环，通过 break 还可提前跳出 for 循环。通常，若两个元素 ref 属性相同，通过 this.$refs 只能获取到最终的元素。但在 v-for 中的 ref ，通过 this.$refs 得到的是一个数组。此处的接口是公共的免费接口，仅模拟效果，不必深究传参和返回。forEach 只支持同步，不支持异步。所以，此例中，获取第一个表单的方法是。
【vue】element-ui、el-table使用V-for循环动态添加表头和数据
热门推荐
蓝胖子的博客
03-17 1万+
【vue】element-ui、el-table使用V-for循环动态添加表头和数据
vue element el-table-column 循环示例代码
宁夏前端工程师，马卫斌，wx：1457508895
10-31 3083
如果你想循环生成多个el-table-column，可以使用v-for指令。组件，如果你没有安装Element UI，需要先安装并引入Element UI。
el-table 表格内循环
懿_51335316的博客
04-20 1979
el-table 表格内循环。
element el-table-column 循环
weixin_45289656的博客
02-02 5526
element el-table-column 循环
element-ui、el-table使用V-for循环动态添加表头和数据
xz1589155358的博客
08-30 6934
element-ui、el-table使用V-for循环动态添加表头和数据
el-table实现表格合并与v-for多层循环嵌套失效解决办法
丘比特没有箭的博客
11-20 1149
el-table实现表格合并与v-for多层循环嵌套失效解决办法
element-ui el-table表格动态v-for渲染表格
weixin_44021888的博客
06-16 5038
elementui el-table根据返回数据for循环并显示
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
12-29
先看看ElementUI里关于el-table的template数据结构： <el-table-
vue循环渲染element-ui中table内容
m0_60540878的博客
08-31 5004
当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。 相当于是要枚举出所有需要展示的参数，这种情况在参数比较少的情况下是比较方便的，但是在有很多数据或者参数不确定的情况下，这种枚举的方式就不太适合了。 <template> <el-table :data="tableData" style="width: 10
el-table-column在v-for情况下使用template情况下，更新循环的源数组，组件不刷新的解决办法
qq_26708001的博客
12-22 1861
最近遇到一个bug，el-table-column是用v-for生成，然后内容用了template模板，改变vue支持数组双向绑定的方法改变数组后，仍然值刷新，组件未刷新。 这是因为template作用域slot-scope监听不到，层级太深了，解决办法是给el-table加个:key=“Math.random()”，保证刷新数据后，el-table组件刷新key不同，触发整个表格组件刷新 ...
解决封装el-table时出现的循环引用问题
hunt_er的博客
01-29 1010
在写项目时遇到一个需求，需要添加一个展开列的功能，用以显示多余的行属性。 由于之前已经封装过element的table组件，所以这次就想着直接在封装过的组件上添加该功能。 先看一看element官方对于展开列的描述。 那就开始做吧，myTable组件中这样写。 ...
el-table 中表格列循环的优缺点
hongtoushan的博客
02-18 1671
基础写法 <template> <el-table :data="tableData" size="mini" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column
element Table实现循环表格、跨表格复选框功能实现
royya_buli的博客
12-09 3438
element Table实现循环表格、跨表格复选框功能实现
当你用element-ui遇到需要在el-table-column上v-for时，可以嵌套一个插槽存放循环的数据
欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈
04-25 4342
使用table表格组件时，table下的某一条数据是个数组，进行循环时，需要用到插槽，scope.row属性
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、付费专栏及课程。

余额充值