el-table column field traversal to add slots

Problem: Every time you use the el-table column field to directly traverse and use v-for, but sometimes you need to add special content display to the specified column. For example, the problem I encountered was to add an input box to the specified column.

Original code:

            <el-table-column
                v-for="(item, index) in columns"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :align="item.align"
                :min-width="item.minWidth"
                />

Idea: Add a slot to the specified column, and customize the content of the column through the slot.

<el-table-column
                v-for="(item, index) in columns"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :align="item.align"
                :min-width="item.minWidth"
                >
                <template slot-scope="{row}" v-if="item.solt">
                    <el-input type="text" v-model="row.delivery" clearable placeholder="本次数量"/>
                </template>
            </el-table-column>

This operation will cause all echoed data to be empty, indicating that as long as the content prop attribute is added to the <el-table-column></el-table-column> tag, it will be invalid, and the page will directly echo the content in the tag. So we need to make a logical judgment here, display custom content when the conditions are met, and display the data directly when the conditions are not met.

Changed code:

<el-table-column
                v-for="(item, index) in columns"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :align="item.align"
                :min-width="item.minWidth"
                >
                <template slot-scope="{row}">
                    <el-input type="text" v-model="row.delivery" clearable placeholder="本次数量" v-if="item.slot === 'delivery'"/>
                    
                    <span v-else>{
   
   {row[item.prop]}}</span>
                </template>
            </el-table-column>