el-table不同数据格式展示

prop 属性指定了每一列要显示的数据在 tableData 中的对应字段

label 属性是每一列的标题

<el-table :data="tableData" style="width: 100%">  
 <template v-for="item in needTableData">  
  
    <!-- 多文本输入 -->  
    <el-table-column v-if="item.type === 'textarea'"  
        align="center"  
        :label="item.label"  
        :width="item.width">  
    <template v-slot="scope">  
    <el-form-item :prop="item.prop">  
        <div v-for="(itemIp,index) in scope.row[item.prop]" style="margin-top: 18px">  
        <el-input  
            :rows='2'  
            size="mini"  
            style="width: 110px"  
            v-model="scope.row[item.prop][index]"  
            :placeholder=item.placeholder 
            />  
            <i @click="onAdd(scope.row[item.prop])" class="el-icon-circle-plus-outline" v-if="index === 0"></i>  
            <i @click="onRemove(scope.row[item.prop], index)" class="el-icon-remove-outline" v-else></i>  
        </div>  
    </el-form-item>  
    </template>  
    </el-table-column>  

    <!-- input输入框 -->  
    <el-table-column v-else-if="item.type === 'input'"  
        :label="item.label"  
        :width="item.width">  
        <template v-slot="scope">  
            <el-input v-model="scope.row[item.prop]"  
            :disabled='item.disabled'  
            :size='item.size' />
        </template>  
    </el-table-column>  

    <!-- select选择框 -->  
    <el-table-column v-else-if="item.type === 'select'" :label="item.label" :width="item.width">  
        <template v-slot="scope">  
            <el-select 
                v-model='scope.row[item.prop]' 
                @change="e=>selectChange(e, scope.$index)" 
                size="mini">  
                <el-option  
                    v-for="(item1,index) in item.options"  
                    :key="index"  
                    :label="item1.label"  
                    :value="item1.value">  
                </el-option>  
          </el-select>  
        </template>  
    </el-table-column>  

    <!-- 操作 -->  
    <el-table-column v-else-if="item.type === 'button'" :label="item.label" :width="item.width">  
        <template v-slot="scope">  
            <el-button 
            :type=item.typecss
            @click="delData(scope.row,scope.$index)" 
            :size="item.size">
            {{  item.words  }}  
            </el-button>  
        </template>  
    </el-table-column>  

    <!-- 初始状态 -->  
    <el-table-column v-else :label="item.label" :width="item.width">  
        <template v-slot="scope">  
            {{ scope.row.test }}  
        </template>  
     </el-table-column>  
 </template>  
</el-table>

tableData: [  
    {  
    originIp: [''],  
    purposeIp: '',  
    purposePort: '',  
    serveName: '',  
    networkProtocol: '',  
    portUsage: '',  
    purposeSystem: '',  
    infoRemark: '',  
    handler: '',  
    }  
],

needTableData: [  
    {prop: 'purposeSystem',  label: '目的系统',  width: '160px',  type: 'select',  
    options: [{value: 1, label: '龙泉图片网关'}, {value: 2, label: '眉山图片网关'}]  
    },  
    {prop: 'originIp', label: '源IP', width: 200, type: 'textarea', rows: 2, placeholder: '多个IP录入',  
     rule: {validator: serveName, required: true, trigger: 'blur'}  
    },  
    {prop: 'purposeIp', label: '目的IP', width: 140, type: 'input', disabled: true, size: 'mini'},  
    {prop: 'purposePort',  label: '目的端口',  width: '140px',  type: 'select',  
     options: [{value: 1, label: '端口一'}, {value: 2, label: '端口二'}]  
    },  
    {prop: 'networkProtocol', label: '端口类型', width: '120px',  type: 'select',  
     options: [{value: 1, label: 'TCL'}, {value: 2, label: 'UDP'}]  
    },  
    {prop: 'serveName', label: '服务名称', width: 160, type: 'input', size: 'mini'},  
    {prop: 'portUsage', label: '端口用途', width: 165, type: 'input', size: 'mini'},  
    {prop: 'infoRemark', label: '备注', width: 100, type: 'input', size: 'mini'},  
    {prop: 'handler', label: '操作', width: '100', type: 'button', typecss: 'danger', words: '删除', size: 'mini'}  
]