Vue el-table

<template>
  <div>
    <div>
      <el-table :data="elementData" border :default-expand-all="true" style="width: 100%" height="500"
        :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
        <el-table-column type="expand">
          <template #default="props">
            <div>
              <el-table :data="props.row.elementProperties" border style="width: 100%" height="60%"
                :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
                <el-table-column label="字段名">
                  <template prop="field" #default="scope">
                    <span v-if="scope.row.updateDataAble">
                      <el-input v-model="scope.row.field" clearable maxlength="50">
                      </el-input>
                    </span>
                    <span v-else>
                      {{ scope.row.field }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="描述">
                  <template prop="comment" #default="scope">
                    <span v-if="scope.row.updateDataAble">
                      <el-input v-model="scope.row.comment" clearable maxlength="50">
                      </el-input>
                    </span>
                    <span v-else>
                      {{ scope.row.comment }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template #default="scope">
                    <el-button type="text" @click="updateData(props.$index, scope.$index)"
                      v-show="scope.row.show">修改</el-button>
                    <el-button type="info" @click="cancel(props.$index, scope.$index)"
                      v-show="!scope.row.show">取消</el-button>
                    <el-button type="primary" @click="save(props.$index, scope.$index)"
                      v-show="!scope.row.show">确认</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="序号" align="center" type="index">
          <template #default="scope">
            <span>{{ (pageParams.currentPage - 1) * pageParams.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="元素名称" prop="elementName" />
        <el-table-column label="元素表名称" prop="elementTableName" />
        <el-table-column label="元素描述" prop="elementDesc" />
        <el-table-column label="创建人" prop="createUser" />
        <el-table-column label="创建时间" prop="createTime" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="primary" @click="addElement(scope.row, scope.$index)" title="新增要素">新增</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 1%;">
        <el-pagination v-model:current-page="pageParams.currentPage" v-model:page-size="pageParams.pageSize"
          :page-sizes="[10, 20, 30, 50]" layout="prev, pager, next, jumper, sizes, total" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <el-dialog v-model="addVisible" title="新增要素" :modal="false" :close-on-click-modal="false" append-to-body width="40%">
      <el-form ref="elementTableRef" style="width: 95%" :model="elementForm" label-position="left">
        <el-form-item label="导入文件:" class="is-required" label-width="88px">
          <el-upload ref="uploadRef" action="" :show-file-list="true" accept=".xls,.xlsx,.csv" :auto-upload="false"
            :limit="1" :before-upload="beforeUpload" v-model:file-list="elementForm.file">
            <span style="color:rgb(64 158 255); text-decoration: underline">导入文件</span>
            <template #tip>
              <span style="color:#A8ABB2;">
                仅支持excel格式
              </span>
            </template>
          </el-upload> </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-divider></el-divider>
          <el-button type="info" @click="addVisible = false">取消</el-button>
          <el-button type="primary" @click="uploadExcel"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import Element from './element.js'

// 定义变量
let {
  elementData, // 要素列表
  total, // 数据总条数
  pageParams, // 分页参数
  addVisible,     // 新增弹窗
  elementId, // 上传的elementId
  elementIndex, // 上传的索引
} = toRefs(
  reactive({
    elementData: [],
    total: 0,
    pageParams: {
      currentPage: 1,
      pageSize: 10
    },
    addVisible: false,
    elementId: 0,
    elementIndex: 0
  })
)

const elementTableRef = ref(null)
const uploadRef = ref(null)
const elementForm = reactive({
  file: []
})


onMounted(() => {
  getElementLists()
})

const handleSizeChange = (val) => {
  pageParams.value.pageSize = val
  getElementLists()
}

const handleCurrentChange = (val) => {
  pageParams.value.currentPage = val
  getElementLists()
}

function updateData(index1, index2) {
  elementData.value[index1].elementProperties[index2].updateDataAble = true
  elementData.value[index1].elementProperties[index2].show = false
}

function cancel(index1, index2) {
  elementData.value[index1].elementProperties[index2].updateDataAble = false
  elementData.value[index1].elementProperties[index2].show = true
}

function addElement(data, index) {
  elementId.value = data.elementId
  elementIndex.value = index
  addVisible.value = true
  nextTick(() => {
    elementTableRef.value.resetFields()
    uploadRef.value.clearFiles()
  })
}

// 文件上传之前判断
const beforeUpload = (file) => {
  const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  if (!isExcel) {
    ElMessage.warning("请上传xls或xlsx文件")
    return false
  }
  return isExcel
}

// 1.获取要素列表
const getElementLists = () => {
  Element.getElementLists(pageParams.value).then((res) => {
    for (let index = 0; index < res.records.length; index++) {
      let data = JSON.parse(res.records[index].elementProperties)
      if (data.length > 0) {
        data.forEach(item => {
          item.updateDataAble = false
          item.show = true
        });
      }
      res.records[index].elementProperties = data
    }
    elementData.value = res.records
    total.value = res.total
  },
    (err) => {
      console.log(err)
    }
  )
}

// 2.更新要素属性
const save = (index1, index2) => {
  let elementId = elementData.value[index1].elementId
  let data = elementData.value[index1].elementProperties
  let properties = []
  data.forEach(item => {
    properties.push({ comment: item.comment, fieldName: item.fieldName })
  })
  Element.updateProperties({ elementId: elementId, properties: properties }).then((res) => {
    ElMessage.success("修改成功")
    getElementLists()
  },
    (err) => {
      console.log(err)
    }
  )
}

// 3.导入excel
const uploadExcel = () => {
  if (elementForm.file === null || elementForm.file === "undefine" || elementForm.file.length === 0) {
    ElMessage.warning("请上传文件")
    return
  }

  let params = {
    elementId: elementId.value,
    file: elementForm.file[0].raw
  }

  Element.importFile(params).then((res) => {
    ElMessage.success("保存成功")
    console.log("Res", res)
    if (res.length > 0) {
      res.forEach(item => {
        elementData.value[elementIndex.value].elementProperties.push({ filed: item })
      })
    }
    // props.row.elementProperties
    // addVisible.value = false
    // pageParams.value = {
    //   currentPage: 1,
    //   pageSize: 10
    // }
    // getElementLists()
  },
    (err) => {
      console.log(err)
    }
  )
}

</script>
<style lang="scss" scoped></style>

Vue el-table序号

        <el-table-column label="序号" align="center" type="index">
          <template #default="scope">
            <span>{{ (pageParams.currentPage - 1) * pageParams.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>

let {
  pageParams, // 分页参数
} = toRefs(
  reactive({
    pageParams: {
      currentPage: 1,
      pageSize: 10
    },
  })
)

表头和数据遍历

<template>
    <div class="container">
        <el-table border :data="tableData" style="width: 80%; margin: 0 auto;"
            :header-cell-style="{ 'text-align': 'center', 'background-color': '#DCDFE6' }"
            :cell-style="{ 'text-align': 'center' }">
            <template v-for="(item, index) in columns">
                <el-table-column :prop="item.prop" :label="item.label" />
            </template>
        </el-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 表头
           columns: [
                            { label: "名称1", prop: "name1" },
                            { label: "名称2", prop: "name2" },
                            { label: "名称3", prop: "name3" },
                            { label: "名称4", prop: "name4" },
                    ],
            // 详情数据
            tableData: [{
                            name1: 'ceshi',
                            name2: 100,
                            name3: '1',
                            name4: "haha"
                        }]
        }
    },
    mounted() {
    },
}
</script>