el-table展开行自动生成

145 阅读1分钟

展开行的自动生成

//通过请求的数据来自动生成这些展开行
<el-table-column type="expand">
<template slot-scope="props">
	<el-form label-position="left" label-width="200px" inline class="demo-table-expand" v-for="item in props.row.ext" :key="item.name">
    	<el-form-item :label="item.label">
          <span>{{ item.value }}</span>
        </el-form-item>
	</el-form>
</template>
</el-table-column>

对请求到的数据进行处理

private async Init() {
    for (let i = 0; i < this.items.length; i++) {
      let item = this.items[i];
      for (let j = 0; j < item.ext.length; j++) {
        const extItem = item.ext[j];
        //下拉框加载下拉选值
        if (extItem.elementType === "Select") {
        //调接口请求
          axios.get(extItem.ext.optionTarget).then((res) => {
            let resitem = res.data.message;
            //判断,并赋值
             for (let i = 0; i < resitem.length; i++) {
              if (extItem.value == resitem[i].cCode) {
                extItem.value = resitem[i].cName;
              } 
          });
        }
      }
      //其他种类的值可以自己判断处理一下,比如
        if (extItem.elementType === "Switch") {
          if (extItem.value == false) {
            extItem.value = "否";
          } else if (extItem.value == true) {
            extItem.value = "是";
          } else {
            extItem.value = "未知";
          }
        }
    }
  }