vue how to render loop element-ui in the table content

For most front-end developers, vuejs + element-ui is the development of back office systems essential to the process technology framework. The background management system, is the most common form of tables and forms to be used to CRUD.

element-ui used in table

- When el-tablethe element is injected dataafter the array of objects, in el-table-columnusing propthe key corresponding to the name property of the object data can be filled, with the labelattributes defined in the table column names. You can use widththe attribute to define the column width.

Equivalent to enumerate all the parameters to be presented, in this case the parameters relatively few cases is more convenient, but there are a lot of uncertain data or parameters, the way this enumeration is not suitable a.

 <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>

Loop element-ui rendering contents in table form

form table is divided into two parts, the header part of the value thead, tbody there is the body portion, the cycle can be set apart, look at the code:

<EL- Table 
    : Data = "rightsDate"     <! - table inside the data source -> 
      border 
      stripe 
      height = "713" 
> 
      <EL-the table- column 
          V - for = "info in rightHeader": Key = "info.key" ! <- Set Header Data source and render the cycle, the contents of the corresponding column Property field names, data sources as detailed in the following format -> 
          : Property = "info.key" 
          : label = "info.label" 
         > 
             <= Template slot-scope "scope" > 
                   {{scope.row [scope.column.property]}}   <-! correspondence table inside the content rendering ->
               </ Template>     

                <template slot-scope="scope">
                        <el-switch
                          v-model="scope.row.ifUse"
                          :active-color="ACT_COLOR"
                          :inactive-color="INACT_COLOR">
                        </el-switch>
                  </template>
             </el-table-column>
</el-table>

Analog Data Source Display:
 rightHeader: [ 
        { 
          label: 'coding' , 
          Key: 'code' 
        }, 
        { 
          label: 'name' , 
          Key: 'name' 
        }, 
        { 
          label: 'authority description' , 
          Key: 'Description' 
        } 
      ], 
rightsDate: [{
       "the above mentioned id": 221 ,
       "code": "01" ,
       "name": "Western opening rights" ,
       "the Description": "The doctor prescribed medicine for permission" ,
      "ifUse":"0"
    }, {
      "id":222,
       "Code": "02" ,
       "name": "Herbal open rights" ,
       "the Description": "Doctors herbal prescription privileges" ,
       "IFUSE": "0" 
    }, {
       "the above mentioned id": 223 ,
       "code ":" 03 " ,
       " name ":" medicine open permission " ,
       " Description ":" doctor medicine prescription permission " ,
       " IFUSE ":" 0 " 
    }, {
       " ID ": 224 ,
       " code ":" 04 " ,
       " name ":" anesthesia open rights " ,
       " the Description ":" The doctor prescriptions of anesthetic rights " ,
      "ifUse":"0"
    },
    {
      "id":225,
      "code": "05",
      "name": "精一开立权限",
       "The Description": "Seiichi doctors prescribing privileges" ,
       "IFUSE": "0" 
    } 
  ]

The results show:

vue how to render loop element-ui in the table content

Guess you like