【vue】使用render函数渲染table中的数据

最新推荐文章于 2024-04-29 11:02:30 发布
最新推荐文章于 2024-04-29 11:02:30 发布
阅读量8.4k 收藏 22
点赞数 6
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46393552/article/details/107848848
版权

设计图
注：公司项目，为了引起不必要麻烦，码一下，请见谅。
代码很长，重复的地方比较多，可以看注释的关键词去找需要的东西

  1. 第一列 整列全是文字 最简单的渲染
  2. 第二列 整列全是按钮组件
  3. 第三列 需要根据数据按照条件去渲染。
  4. 第四列 存在单选按钮和input框互动
<template>
  <div>
    <Tabs type="card">
      <TabPane label="选项卡A">
        <div class="fill-table-container">
          <Table border :columns="columns" :data="data" :loading="tableLoading"> </Table>
        </div>
      </TabPane>
      <TabPane label="选项卡B"> </TabPane>
    </Tabs>
  </div>
</template>

<script>
import {Table} from 'view-design';
import Tabs from '../../../components/tabs/index';
import * as wardApi from '../../../api/ward';
import {deepCopy} from 'view-design/src/utils/assist.js';
// 建议先看一下前置知识点
// 渲染函数 & JSX   https://cn.vuejs.org/v2/guide/render-function.html
export default {
  name: 'alarm-setting',
  components: {
    Table,
    Tabs,
  },
  watch: {
    // 深度监听数据变化，主要作用于单选框改变value之后，及时刷新选中样式
    data: {
      handler(newVal, oldVal) {},
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      wardId: '',
      tableLoading: true,
      physicalSignsData: {},
      data: [],
      columns: [
        // 第一列 整列全是文字  最简单的渲染
        {
          // title是这一列的标题
          title: '项目',
          key: 'item',
          align: 'center',
          // 此处指定该列的class
          className: 'ivu-table-all table-head-style',
          // render 函数传入两个参数，第一个是 h，第二个是对象，包含 row、column 和 index，分别指当前单元格数据，当前列数据，当前是第几行。
          // 此处渲染，是一行一行的渲染，下面的render是从data绑定的数据里一项一项的拿数据，每一项作为一行中的数据，执行到某一行的时候，这一行的数据就是params.row
          render: (h, params) => {
            // h('div',{},[])   第一个参数是标签，第二个参数是个对象，包含class，style，attrs，on等，第三个参数是数组，包含的是子元素，即嵌套h()
            // 详细介绍见vue官方文档。渲染函数 & JSX   https://cn.vuejs.org/v2/guide/render-function.html
            return h(
              'div',
              {
                style: {
                },
              },
              [
                h(
                  'div',
                  {
                    class: {
                      tableItem: true,
                    },
                    // 注意style的key如果是有连字符，需要写成驼峰的形式，例如：alignItems，justifyContent
                    style: {
                      display: 'inline-block',
                    },
                  },
                  // 第一列，当前行，这一个格子的这个元素中需要放入name这个变量，params.row.name, 
                  params.row.name,
                ),
                // 大的容器中放入两个子元素，两个h('div',{},[])
                h(
                  'div',{},
                  // 还是第一列，还是这一行，这个元素中需要放入unit这个变量，params.row.unit, 
                  params.row.unit,
                ),
              ],
            );
          },
        },
        // 第二列 整列全是按钮组件
        {
          title: '开关',
          key: 'switch',
          render: (h, params) => {
            // 与前面的一样，h的第一个参数可以传入自定义插件
            return h('i-switch', {
              props: {
                value: params.row.enable,
              },
              // on可以传入绑定事件
              on: {
                'on-change': (status) => {
                  this.data[params.row._index].enable = status;
                },
              },
            });
          },
        },
        // 第三列 需要根据数据按照条件去渲染。
        {
          title: '上限下限',
          key: 'threshold',
          className: 'ivu-table-all',
          render: (h, params) => {
            return h('div', {}, [
              h(
                'div',
                {
                  class: {
                    // 这里 是根据后端的数据，如果这个数据是空，当前整个cell就不显示。 这个disappear是display：none
                    tableDisappear: params.row.ruleFormat === 'empty',
                  },
                  // 这里的style当然可以放到css里面一起写。
                  style: {
                    display: 'flex',
                    flexWrap: 'nowrap',                  // 不会换行
                    justifyContent: 'space-around',      // 元素往两边排
                    alignItems: 'center',
                  },
                },
                [
                  h(
                    'div',
                    {
                      class: {
                        // hide是透明度调整为0，disappear是display：none。   此处跟后端约定的是，如果包含upper和lower字段，就显示这个cell，如果只包含upper不包含lower，就把前面的input隐藏，后面input靠右对齐。 
                        tableHide: params.row.ruleFormat.indexOf('lower') === -1,
                        tableDisappear: params.row.ruleFormat.indexOf('upper') === -1 && params.row.ruleFormat.indexOf('lower') === -1,
                      },
                      style: {
                        display: 'inline-block',
                      },
                    },
                    [
                      // 下限 lower
                      h(
                        'div',
                        {
                          style: {
                            display: 'inline-block',
                          },
                        },
                        '下限',
                      ),
                      h(
                        'div',
                        {
                          style: {
                            display: 'inline-block',
                            width: '120px',
                            marginLeft: '24px',
                          },
                        },
                        [
                          h('i-input', {
                            // 限制输入类型必须为number
                            props: {
                              type: 'number',
                            },
                            // input框的双向绑定， attrs里设置value绑定的变量，然后on监听事件，修改value绑定的变量为事件e.target.value;  可自己输出一下e来找到所需要的变量
                            attrs: {
                              value: params.row.rule.lower,
                            },
                            on: {
                              'on-change': (e) => {
                                this.data[params.row._index].rule.lower = e.target.value;
                              },
                            },
                          }),
                        ],
                      ),
                    ],
                  ),
                  // 上限 upper
                  h(
                    'div',
                    {
                      class: {
                        tableHide: params.row.ruleFormat.indexOf('upper') === -1,
                        tableDisappear: params.row.ruleFormat.indexOf('upper') === -1 && params.row.ruleFormat.indexOf('lower') === -1,
                      },
                    },
                    [
                      h(
                        'div',
                        {
                          style: {
                            display: 'inline-block',
                          },
                        },
                        '上限',
                      ),
                      h(
                        'div',
                        {
                          style: {
                            display: 'inline-block',
                            marginLeft: '25px',
                            width: '120px',
                          },
                        },
                        [
                          h('i-input', {
                            props: {
                              type: 'number',
                            },
                            attrs: {
                              value: params.row.rule.upper,
                            },
                            on: {
                              'on-change': (e) => {
                                this.data[params.row._index].rule.upper = e.target.value;
                              },
                            },
                          }),
                        ],
                      ),
                    ],
                  ),
                  // 时间
                  h(
                    'div',
                    {
                      class: {
                        tableDisappear: params.row.ruleFormat.indexOf('time') === -1,
                      },
                      style: {
                        width: '100%',
                        display: 'flex',
                        flexWrap: 'nowrap',
                        justifyContent: 'space-around',
                        alignItems: 'center',
                      },
                    },
                    [
                      h(
                        'div',
                        {
                          props: {},
                          style: {
                            display: 'inline-block',
                          },
                        },
                        [
                          h(
                            'div',
                            {
                              style: {
                                display: 'inline-block',
                              },
                            },
                            '时间',
                          ),
                          h(
                            'div',
                            {
                              style: {
                                display: 'inline-block',
                                width: '120px',
                                marginLeft: '24px',
                              },
                            },
                            [
                              h('i-input', {
                                props: {
                                  type: 'number',
                                },
                                attrs: {
                                  value: params.row.rule.time,
                                },
                                on: {
                                  'on-change': (e) => {
                                    this.data[params.row._index].rule.time = e.target.value;
                                  },
                                },
                              }),
                            ],
                          ),
                        ],
                      ),
                      h(
                        'div',
                        {
                          style: {
                            width: '120px',
                            height: '10px',
                            display: 'inline-block',
                          },
                        },
                        [],
                      ),
                    ],
                  ),
                ],
              ),
            ]);
          },
        },
        // 第四列 存在单选按钮和input框互动    需求变化值或者变化率只能选一个，未选中的那个，input框也会不可用
        {
          title: '变化',
          key: 'changes',
          className: 'ivu-table-all',
          render: (h, params) => {
            return h(
              'div',
              {
                class: {
                  tableDisappear: params.row.ruleFormat.indexOf('change') === -1,
                },
                style: {
                  display: 'flex',
                  flexWrap: 'nowrap',
                  justifyContent: 'space-around',
                  alignItems: 'center',
                  height: '40px',
                },
              },
              [
                h(
                  'div',
                  {
                    style: {
                      display: 'inline-block',
                    },
                  },
                  [
                    h('Radio', {
                      style: {
                        display: 'inline-block',
                      },
                      // 单选框的双向绑定。   网上查了很多联动的方式，试了一下都没效果，然后就用最笨的办法，两个单选分别绑定一个变量，然后点击A单选框，把B单选框绑定的变量设置为false，A自己的变为True，点击B单选框反过来。
                      // 仅仅这样写还不够，点击之后变量被改变了，可是页面上没刷新出来效果，  需要设置watcher进行监听。
                      props: {
                        value: params.row.rule && params.row.rule.change_rate_checked ? params.row.rule.change_rate_checked : false,
                      },
                      on: {
                        'on-change': (e) => {
                          this.data[params.row._index].rule.change_value_checked = false;
                          this.data[params.row._index].rule.change_rate_checked = true;
                        },
                      },
                    }),
                    h(
                      'div',
                      {
                        style: {
                          display: 'inline-block',
                        },
                      },
                      '变化率',
                    ),
                    h(
                      'div',
                      {
                        style: {
                          display: 'inline-block',
                          width: '120px',
                          marginLeft: '8px',
                        },
                      },
                      [
                        h('i-input', {
                          props: {
                            type: 'number',
                            // 绑定单选框的value的变量，判断input框是否可用
                            disabled: !this.data[params.row._index].rule.change_rate_checked,
                          },
                          attrs: {
                            value: params.row.rule.change_rate,
                          },
                          on: {
                            'on-change': (e) => {
                              this.data[params.row._index].rule.change_rate = e.target.value;
                            },
                          },
                        }),
                      ],
                    ),
                    h(
                      'div',
                      {
                        style: {
                          display: 'inline-block',
                          fontWeight: '500',
                          fontSize: '18px',
                          lineHeight: '23px',
                          color: '#555E7A',
                          marginLeft: '8px',
                        },
                      },
                      '%',
                    ),
                  ],
                ),
                h(
                  'div',
                  {
                    props: {},
                    style: {
                      display: 'inline-block',
                    },
                  },
                  [
                    h('Radio', {
                      style: {
                        display: 'inline-block',
                        marginLeft: '24px',
                      },
                      props: {
                        value: params.row.rule && params.row.rule.change_value_checked ? params.row.rule.change_value_checked : false,
                      },
                      on: {
                        'on-change': (e) => {
                          this.data[params.row._index].rule.change_value_checked = true;
                          this.data[params.row._index].rule.change_rate_checked = false;
                        },
                      },
                    }),
                    h(
                      'div',
                      {
                        style: {
                          display: 'inline-block',
                        },
                      },
                      '变化值',
                    ),
                    h(
                      'div',
                      {
                        style: {
                          display: 'inline-block',
                          fontWeight: '500',
                          fontSize: '26px',
                          marginLeft: '20px',
                        },
                      },
                      '±',
                    ),
                    h(
                      'div',
                      {
                        style: {
                          display: 'inline-block',
                          width: '120px',
                          marginLeft: '8px',
                        },
                      },
                      [
                        h('i-input', {
                          props: {
                            type: 'number',
                            disabled: !this.data[params.row._index].rule.change_value_checked,
                          },
                          attrs: {
                            value: params.row.rule.change_value,
                          },
                          on: {
                            'on-change': (e) => {
                              this.data[params.row._index].rule.change_value = e.target.value;
                            },
                          },
                        }),
                      ],
                    ),
                    h(
                      'div',
                      {
                        style: {
                          display: 'inline-block',
                          width: '55px',
                          fontSize: '18px',
                          lineHeight: '27px',
                          textAlign: 'left',
                          color: '#555E7A',
                          marginLeft: '8px',
                        },
                      },
                      params.row.unit,
                    ),
                  ],
                ),
              ],
            );
          },
        },
      ],
    };
  },
  mounted() {
    this.wardId = this.$route.query.wardId;
    this.getPhysicalSigns(this.wardId);
  },
  methods: {
    getPhysicalSigns(wardId) {
      wardApi
        .getPhysicalSigns(wardId)
        .then((res) => {
          this.physicalSignsData = res.data.data;
          this.pushData();
          this.tableLoading = false;
        })
        .catch((err) => {
          this.$Message.error(err.response.data.message);
        });
    },
    savePhysicalSigns(metrics, wardId) {
      wardApi
        .savePhysicalSigns(metrics, wardId)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          this.$Message.error(err.response.data.message);
        });
    },
    pushData() {
      let data = this.physicalSignsData;
      for (let index = 0; index < data.length; index++) {
        if (data[index].rule) {
          // 去掉json里的转义符
          let newJsonStr = data[index].rule.replace(/\\/g, '');
          const newRule = JSON.parse(newJsonStr);
          data[index].rule = {...newRule};
        } else {
          data[index].rule = {change_rate_checked: false, change_value_checked: false, change_rate: 0, change_value: 0};
        }
      }
      this.data = data;
      console.log(this.data);
    },
    handleConfirm() {
      let data = deepCopy(this.data);
      for (let index = 0; index < this.data.length; index++) {
        data[index].rule = JSON.stringify(this.data[index].rule);
      }
      this.savePhysicalSigns(data, this.wardId);
    },
  },
};
</script>
<style lang="less" scoped>
/*表格内某些组件显示隐藏控制*/
.tableHide {
  opacity: 0;
}
.tableDisappear {
  display: none !important;
}
/*input禁用背景色*/
.ivu-input[disabled],
fieldset[disabled] .ivu-input {
  background-color: #303e62;
}
/*input限制输入类型为number时，禁用上下箭头调整数值*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type='number'] {
  -moz-appearance: textfield;
}
/*table loading状态时遮罩层背景色*/
.ivu-spin-fix {
  background-color: #181e35;
}
</style>
默默的小跟班
关注
  • 6
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue iview table表格 render函数 自动合并单元格
愿你走过半生，归来任是少年。
08-29 714
vue iview table表格 render函数 自动合并单元格
vue中用table_vue 用render函数渲染table
weixin_42126749的博客
01-13 1965
这里项目安装了 iview 插件作为演示文档，这里安装，我就不介绍了1，什么是 render 函数？1，render 函数 跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数。2，当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他...
Vue项目中Table设置 render 函数
黑白两客
12-24 1310
statusList1: { 0: "", 1: "", 2: "药品服务费收入", 3: "特药服务费收入", 4: "直保经纪费", 5: "再保经纪费", 6: "广告费", }, render: (h, params) => { return this.colorCommon(h, params.row, "1"); },.
vue3 table 性能优化，减少 85% 渲染耗时
最新发布
04-29 843
vue2 升级到 vue3，升级后发现 element-plus table 的性能相比 vue2 版本下降非常严重。
Vue Render 函数 Table内编辑 应用
weixin_46677214的博客
12-27 859
Vue Render 函数 Table内编辑 应用 前言 在以前版本中，通过在table中嵌套span和input的方式，来实现这个功能，但是在实际使用过程中，代码会显得特别的冗长繁琐。这个时候，可以通过使用render函数来解决这个问题。 思路 思路的话，大概都是一样的，通过控制其span、input的显隐来实现，点击后更改的作用。 代码部分 通过creatElement创建一个divVNode,在再其中创建span的和input的VNode。 createElement('el-input', {}),
关于vue使用render函数，封装一个完整的table表格,基于elementui
Benz_s600的博客
05-06 2714
前言：在做后台管理系统的时候，小伙伴经常会遇到多个页面会使用到表格，我们如果不进行封装的话，那么每个页面都得引用一次，并且书写一定的样式。所以，在这里我做了一个简装的基于elementui封装的表格。技术不好 ，望理解。 1.子组件 <el-table :data="data"> <el-table-column v-for="(col, index) in ...
vue实现二维数组表格渲染
温暖前端的博客
02-03 1217
指令生成表头和表格行，并在每个单元格中显示对应的值。使用Vue 3的组合式API。在模板中，使用嵌套的。在Vue中渲染二维数组表格可以采用嵌套的。的语法来迭代二维数组中的行数据，并在。的语法来迭代每行中的列数据，并在。指令来遍历二维数组。标签内部，我们使用嵌套的。数组则表示表格的数据。指令来渲染二维数组。指令遍历每行中的列。
VUE 封装动态生成表头表格，单元格动态render渲染el控件，控制隐藏显示列
桃桃小鱿鱼的博客
11-11 1586
使用后端数据动态生成一个包含多级表头，合并单元格，列隐藏显示，单元格自定义渲染的表格
vue.js columns 下的样式设置，render样式设置
CSDN_lin2018的博客
10-13 1149
render: (h, params) => { return h('div', [ //当前标签 h('input', { //参数 value:显示值 disabled： true不可编辑; false 可编辑 attrs: { value: params.row.value, disabled:true }, style: { width : '200px',height: '31px', backgr...
VUE-Table上绑定Input通过render实现双向绑定数据的示例
10-18
总之，Vue-Table上通过`render`函数绑定`Input`并实现双向数据绑定，主要是利用Vue的响应式系统和自定义渲染能力。这种做法允许我们在表格组件中创建交互式输入，同时保持数据模型和视图的同步，提高了用户体验。
ant design vue中表格指定格式渲染方式
01-18
注意点：定义的columns一定要写在data中，否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1： 指定渲染函数： const columns = [ { title: '排名', dataIndex: 'key', customRender: ...
TableCellRenderer的用法（JTable单元格背景颜色设置）
05-20
实现设置JTable中某些单元格的背景色
layui将table转化表单显示的方法(即table.render转为表单展示)
12-13
现有一个 table.render({ id : 'table', type:'post', elem : '#table', url : url, where : {'Id' : $data.Id}, page:false, cols : [ [ //表头 ]] }) 最简单直接用ajax请求，确保url路径正确 $.ajax({ dataType:'json', type:'post', url:url, data:{'Id': $data.Id}, success:function (data) {
浅谈vue的iview列表table render函数设置DOM属性值的方法
11-30
本篇文章将详细探讨如何在iView的Table组件中使用`render`函数来设置DOM属性值，特别是针对图片（img）标签的`src`属性。 首先，我们要理解`render`函数的基本概念。在Vue中，`render`函数允许我们以JavaScript的...
vue+element+table+render+slot
01-20
// render函数渲染组件 expandDom: { functional: true, props: { row: Object, render: Function, index: Number, column: { type: Object, default: null }, }, render: (h, ctx) => { const params = ...
用于在vxetable表格中适配antdesignvue组件的渲染
08-10
3. **组件适配与渲染**：在VxeTable中适配Ant Design Vue组件，主要是通过VxeTable的自定义渲染（render）函数来实现的。这通常涉及到`h`函数的使用，`h`是Vue的渲染函数，允许开发者创建Vue组件实例。通过`h...
Vue+ElemetUI使用表格获取index
z2014ypd的博客
04-08 4095
elementUI下获取表格的索引 在elementUI的表格中，可以使用监听事件，获取到复选框中的id值， 在"el-table"标签中，写入 @selection-change=“selectMore” 监听事件，事件名称自定义，例如：<el-table @selection-change="selectMore" :data="employees" style="width: 100...
vue+ element 使用render渲染table、render-header自定义表头、scopedSlots自定义数据格式
热门推荐
qq_37508970的博客
01-24 2万+
z'c'v'z'x'c'v在地震造成v
vue Render 函数用法
weixin_45677987的博客
03-15 1009
1： Render: 函数用法： 通过给columns 数据项： 设置一个render 函数， 可以自定义渲染当前列， 包括渲染自定义组件， 它是基于Vue 的render 函数。 render 函数传入两个参数， 第一个是h, 第二个是对象： 包含row, column 和 index, 分别指当前列数据， 当前是第几列。 eg: { title: 'Name', key: 'name', render: (h, params) =>...
table.render设置成post请求
06-09
好的，将 layui 数据表格的请求方式改为 POST 请求，可以参考以下代码： ```javascript // 前端 JS 代码 layui.use('table', function(){ var table = layui.table; // 渲染 layui 数据表格 table.render({ elem: '#data-table', url: '/api/tableData', method: 'POST', where: { keyword: '' } // 其他配置项 }); // 监听搜索按钮的点击事件 $('#searchBtn').click(function(){ // 获取搜索框的值 var keyword = $('#keyword').val(); // 设置请求参数 table.reload('data-table', { method: 'POST', where: { keyword: keyword } }); }); }); // 后台接口代码 app.post('/api/tableData', function(req, res){ // 获取请求参数 var keyword = req.body.keyword; // 根据参数查询数据 var data = getDataByKeyword(keyword); // 返回数据给 layui 数据表格 res.json({ code: 0, msg: '', count: data.length, data: data }); }); ``` 以上代码中，我们将 layui 数据表格的请求方式设置为 POST 请求，并在发送请求时指定请求方法。后台接口代码中，我们通过 `req.body` 获取 POST 请求的请求参数。 需要注意的是，当将 layui 数据表格的请求方式设置为 POST 请求时，需要在后台接口代码中使用 `app.post` 方法来处理请求，不再使用 `app.get` 方法。 希望这个回答能够帮到您！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值