elementui 表格中使用选择器、开关

在el-table中要用到el-select下拉框

项目中的这个表格是通过迭代生成的, 所以思路就是在迭代的过程中，进行v-if、v-else-if、v-else的判断来选择遍历到某个属性的时候自定义展示

<el-table>
      <el-table-column v-for="(item, index) in formThead" :key="index" :label="item.label">
        <template slot-scope="scope">
          <div v-if="item.select">
            <el-select>
              <el-option v-for="info in list" :key="info.value" :label="info.label" :value="info.value" />
            </el-select>
          </div>
        </template>
      </el-table-column>
</el-table>

// 表格头数据
this.formThead = [
      { label: '序号', key: '$index', width: '50', minWidth: '10%' },
      { label: '名称', key: 'name', width: '', minWidth: '10%', fn: undefined },
      { label: 'select', key: 'select', width: '', minWidth: '10%', select:true }
    ]

// 下拉框数据
list: [{ value: '-1', label: '西瓜' }, { value: '0', label: '苹果' }, { value: '1', label: '香蕉' }]

elementui 表格中使用开关

<el-table-column v-for="(item, index) in formThead" :key="index" :width="item.width" :min-width="item.minWidth" :label="item.label" header-align="center" align="center" :show-overflow-tooltip="true" :fixed="item.fixed">
        <template slot-scope="scope">
          <div v-if="!item.operation">
            {{ format(scope, item) }}
          </div>
          <div v-else>
            <div v-if="item.key=='state'">
              <el-switch v-model="scope.row[item.key]" active-color="#13ce66" inactive-color="#ff4949">
              </el-switch>
            </div>
            <div v-else>
              <el-button type="primary" size="mini" @click="update(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" @click="delete(scope.row)">删除</el-button>
            </div>
          </div>
        </template>
      </el-table-column>


this.formThead = [
      { label: '序号', key: '$index', width: '50', minWidth: '10%' },
      { label: '名称', key: 'name', width: '', minWidth: '10%', fn: undefined },
      { label: '类型', key: 'type', width: '', minWidth: '10%', fn: undefined },
      { label: '图标', key: 'icon', width: '', minWidth: '10%', fn: undefined },
      { label: '状态', key: 'state', width: '', minWidth: '10%', fn: undefined, operation: true },
      { label: '操作', key: '', width: '200', minWidth: '15%', operation: true }
    ]

重点在于去拿到表格中的key，然后对key进行操作，判断