vue如何循环渲染element-ui中table内容

对于大多数前端开发者来说，vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架。而后台管理系统中，最常见的形式就是表格和表单，以便用来增删改查。

element-ui中table的使用

——当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

相当于是要枚举出所有需要展示的参数，这种情况在参数比较少的情况下是比较方便的，但是在有很多数据或者参数不确定的情况下，这种枚举的方式就不太适合了。

循环渲染出element-ui中table表格内容

table表格分为两个部分，一部分值thead表头，还有是tbody主体部分，所以可以分别循环出来，看代码：

table
    :data="rightsDate"     <！-- 表格里面的数据源 -->
      border
      stripe
      height="713"
>
      column
          v-for="info in rightHeader" :key="info.key"     

          :property="info.key"
          :label="info.label"
         >
             
          
          
                
             

模拟数据源展示：
rightHeader: [
        {
          label: '编码',
          key: 'code'
        },
        {
          label: '姓名',
          key: 'name'
        },
        {
          label: '权限描述',
          key: 'description'
        }
      ],
rightsDate:[{
      "id":221,
      "code": "01",
      "name": "西药开立权限",
      "description": "医生对西药处方权限",
      "ifUse":"0"
    }, {
      "id":222,
      "code": "02",
      "name": "草药开立权限",
      "description": "医生对草药处方权限",
      "ifUse":"0"
    }, {
      "id":223,
      "code": "03",
      "name": "成药开立权限",
      "description": "医生对成药处方权限",
      "ifUse":"0"
    }, {
      "id":224,
      "code": "04",
      "name": "麻醉开立权限",
      "description": "医生对麻醉处方权限",
      "ifUse":"0"
    },
    {
      "id":225,
      "code": "05",
      "name": "精一开立权限",
      "description": "医生对精一处方权限",
      "ifUse":"0"
    }
  ]

展示结果：

 

转载于:https://www.cnblogs.com/layaling/p/10962858.html