element-ui渲染el-table表格小技巧

element-ui中table的使用

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

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

常规用法

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

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

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

<el-table
	:data="rightsData" <!--表格数据源-->
	border
	stripe
	height="590"
>
	<!--设置表头数据源，并循环渲染出来，property对应列内容的字段名-->
	<el-table-column
		v-for="item in rightHeader"
		:key="item.key"
		:property="item.key"
		:label="item.label"
	>
		<template slot-scope="scope">
		<!--渲染对应表格里面的内容-->
			{
          
   {
          
   scope.row[scope.column.property]}}
		</template>
	</el-table-column>
	<el-table-column label="启用状态">
       <template slot-scope="scope">
               <el-switch
                 v-model="scope.row.status"
                 :active-color="ACT_COLOR"
                 :inactive-color="INACT_COLOR">
               </el-switch>
         </template>
    </el-table-column>
</el-table>

rightHeader: [
        {
          
   
          label: 编码,
          key: code
        },
        {
          
   
          label: 姓名,
          key: name
        },
        {
          
   
          label: 权限描述,
          key: description
        }
      ],
rightsData:[{
          
   
      "id":1,
      "code": "01",
      "name": "西药开立权限",
      "description": "是的噶事大概的",
      "status":"0"
    }, {
          
   
      "id":2,
      "code": "02",
      "name": "三顿饭IU我us噢ID",
      "description": "sadgas都发生",
      "status":"0"
    }, {
          
   
      "id":3,
      "code": "03",
      "name": "阿斯顿发斯蒂芬",
      "description": "sadgas搭嘎是的",
      "status":"0"
    }, {
          
   
      "id":4,
      "code": "04",
      "name": "按时打发士大夫是",
      "description": "阿萨德噶啥大概的",
      "status":"0"
    },
    {
          
   
      "id":5,
      "code": "05",
      "name": "阿斯顿发送到VS地方",
      "description": "阿萨德刚傻大个",
      "status":"0"
    }
  ]