Admin.Net(vue)

效果图


<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"><el-tab-pane label="版本" name="first"><el-table :data="tableData" style="width: 100%" max-height="250"><el-table-column prop="sortSeq" label="序号" width="120" /><el-table-column prop="partVer" label="版本" width="120"><template #default="scope"><el-inputv-model="scope.row.partVer"autocomplete="off":disabled="deletedisabled(scope)"@input="handpartVer"/>template>el-table-column><el-table-column prop="smtDevice" label="smtDevice" width="120"><template #default="scope"><el-inputv-model="scope.row.smtDevice"autocomplete="off":disabled="deletedisabled(scope)"/>template>el-table-column><el-table-column prop="routeId" label="工艺流程" width="120"><template #default="scope"><el-selectclearablefilterablev-model="scope.row.routeId"placeholder="请选择工艺路线":disabled="deletedisabled(scope)"><el-optionv-for="(item, index) in routeDropdownList":key="index":value="item.value":label="item.label"/>el-select>template>el-table-column><el-table-column fixed="right" label="操作" width="120"><template #default="scope"><el-buttonlinktype="primary"size="small"@click.prevent="deleteRow(scope.$index)":disabled="deletedisabled(scope)">删除el-button>template>el-table-column>el-table><el-button class="mt-4" style="width: 100%" @click="onAddItem">添加el-button>el-tab-pane>el-tabs>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import type { TabsPaneContext } from "element-plus";
import { getRouteDropdown } from "/@/api/xx/xx";const partnumberId = ref();
const tableData = ref([{id: 0,sortSeq: 100,partVer: "A1",smtDevice: 200,routeId: 0,partnumberid:0,},
]);// 打开弹窗
const openDialog = async (row: any) => {if (JSON.stringify(row) !== "{}") {partnumberId.value = row.id;getRouteDropdownList();//不等于空说明有值let dataInList = await getPageListVersion(row.id);//console.log(dataInList.data);tableData.value = dataInList.data.result ?? [];deletedisabled.value = true;} else {tableData.value = [];}ruleForm.value = JSON.parse(JSON.stringify(row));isShowDialog.value = true;
};
const deleteRow = (index: number) => {tableData.value.splice(index, 1);
};
//判断如果有值不可以删除
const deletedisabled = (scope: object) => {if (scope.row.id == 0) {return false;} else {return true;}
};const onAddItem = () => {tableData.value.push({sortSeq: tableData.value.length + 100,partVer: "",smtDevice: 0,routeId: 0,partnumberid: partnumberId.value,id: 0,});
};const handpartVer = (row) => {ruleForm.value.partVersion = row;
};
</script>
<style>
.demo-tabs > .el-tabs__content {padding: 32px;color: #6b778c;font-size: 32px;font-weight: 600;
}
</style>


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部