<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>