vue3中，tabs标签页的使用、调用方法实现动态style
效果
1
2
代码
src\views\myCenter\projectCenter\projectSettings.vue
<!-- @Description 项目中心 - 项目基础设置 @author wdd @date 2023/11/9 --> <template> <centerHead title="项目基础设置"></centerHead> <tab :tabList="tabList" :defaultState="tabIndex" @changeTab="tabChange"></tab> <Milestone v-show="tabIndex === '0'" /> <RiskGrade v-show="tabIndex === '1'" /> </template> <script lang="ts" setup> import Milestone from './components/Milestone.vue' import RiskGrade from './components/RiskGrade.vue' import {ref} from 'vue' const tabList = ref([ {state: "0", name: '里程碑节点'}, {state: "1", name: '风险阈值设置'}, ]); const tabIndex = ref('0'); // tab切换 const tabChange = (val:any) => { tabIndex.value = val; } </script> src\views\myCenter\projectCenter\components\Milestone.vue
<!-- @Description 项目中心 - 项目基础设置 - 里程碑节点 @author wdd @date 2023/11/10 --> <template> <div class="content"> <div class="left"> <h4>项目类型区</h4> <el-button type="primary" @click="add(1)">新增</el-button> <el-button type="primary" @click="saveType">保存类型</el-button> <el-table :header-cell-style="{ background: '#eef1f6' }" ref="tableRef" :data="financeTableData" class="table"> <el-table-column type="index" width="55" label="序号"></el-table-column> <el-table-column label="项目类型" width="180"> <template #default="scope"> <el-input v-if="scope.row.editType" v-model="scope.row.description" maxlength="100" οninput="value=value.replace(/[^\d.]/g,'')" /> <span v-else>{
{ scope.row.description }}</span> </template> </el-table-column> <el-table-column label="操作" align="right"> <template #default="scope"> <el-button v-if="scope.row.editType" link type="primary" @click="handleSave('项目类型', scope.row,scope.$index)"> 保存 </el-button> <el-button v-if="!scope.row.editType" link type="danger" @click="handleDelete('项目类型',scope.$index)"> 删除 </el-button> <el-button v-if="!scope.row.editType" link type="primary" @click="handleEdit( '项目类型',scope.row,scope.$index)"> 编辑 </el-button> <el-button v-if="!scope.row.editType" link type="primary" @click="nodeClick( scope.row, scope.$index)"> 里程碑节点管理 </el-button> </template> </el-table-column> </el-table> </div> <div class="segment"></div> <div class="right"> <div class="title"> <h4>里程碑节点区</h4> <el-button type="primary" @click="add(2)">新增</el-button> <el-button type="primary" @click="saveNode">保存节点</el-button> </div> <el-table :header-cell-style="{ background: '#eef1f6' }" ref="tableRef" :data="nodeList" class="table"> <el-table-column type="index" width="55" label="序号"></el-table-column> <el-table-column label="项目节点" width="180"> <template #default="scope"> <el-input v-if="scope.row.editType" v-model="scope.row.description" maxlength="100" οninput="value=value.replace(/[^\d.]/g,'')" /> <span v-else>{
{ scope.row.description }}</span> </template> </el-table-column> <el-table-column label="操作" align="right"> <template #default="scope"> <el-button v-if="scope.row.editType" link type="primary" @click="handleSave('节点', scope.row,scope.$index)"> 保存 </el-button> <el-button v-if="!scope.row.editType" link type="danger" @click="handleDelete('节点',scope.$index)"> 删除 </el-button> <el-button v-if="!scope.row.editType" link type="primary" @click="handleEdit('节点', scope.row,scope.$index)"> 编辑 </el-button> </template> </el-table-column> </el-table> </div> </div> </template> <script lang="ts" setup> import { ref } from 'vue'; import { ElMessage, ElMessageBox } from 'element-plus' const financeTableData = ref([{ id: 1, description: '创新类', editType: true, }, { id: 2, description: '创意类', editType: true, }]) const nodeList = ref([{ id: 1, description: '内容征集', editType: true, }, { id: 2, description: '作品提交', editType: true, }]) // 新增 const add = (val: any) => { if (val == 1) { financeTableData.value.push({ description: '', editType: true }) } else { nodeList.value.push({ description: '', editType: true }) } } const saveType = () => { } const saveNode = () => { } // 里程碑节点 const nodeClick = (row: any, index: any) => { } // 编辑类型 const handleEdit = (type: any, row: any, index: any) => { if (type == '项目类型') { financeTableData.value[index].editType = true } else { nodeList.value[index].editType = true } } const handleDelete = (type: any, index: any) => { ElMessageBox.confirm(`此操作将删除该${type}, 是否继续?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { if (type == '项目类型') { financeTableData.value.splice(index, 1) financeTableData.value[index].editType = false } else { nodeList.value.splice(index, 1) nodeList.value[index].editType = false } ElMessage.success('删除成功!') }).catch(() => { ElMessage.error('删除失败!') }) } const handleSave = (type: any, row: any, index: any) => { if (type == '项目类型') { financeTableData.value[index].editType = false financeTableData.value[index] = row } else { nodeList.value[index].editType = false nodeList.value[index] = row } } </script> <style lang="scss" scoped> .content { margin-top: 20px; margin-left: 16px; display: flex; width: 60%; .left { flex: 1; border-radius: 4px; padding: 10px; margin-right: 10px; } .segment { border-left: 1px dashed #ccc; } .right { flex: 1; margin-left: 10px; border-radius: 4px; padding: 10px; .title { width: 100%; height: 46px; } } h4 { float: left; } .el-button { float: right; margin-bottom: 10px; margin-left: 10px; } } </style> src\views\myCenter\projectCenter\components\RiskGrade.vue
<!-- @Description 项目中心 - 项目基础设置 - 风险阈值设置 @author wdd @date 2023/11/9 --> <template> <div class="content"> <div class="set-box"> <el-button type="primary" @click="add">新增</el-button> <el-table :header-cell-style="{ background: '#eef1f6' }" ref="tableRef" :data="tableData" class="table"> <el-table-column prop="riskLevel" align="center" label="风险等级"></el-table-column> <el-table-column prop="minNumber" align="center" label="超出天数"></el-table-column> <el-table-column prop="describe" align="center" label="描述"></el-table-column> <el-table-column label="颜色表示" align="center" width="80"> <template #default="scope" > <div :style="{backgroundColor:scope.row.color,paddingLeft:'50px',textAlign:'center',width:'50px',height:'20px'}"></div> </template> </el-table-column> <el-table-column label="操作" align="right" width="90"> <template #default="scope"> <span class="text-btn" @click="edit(scope.row)">编辑</span> <span class="del-btn" @click="onDelete(scope.row)">删除</span> </template> </el-table-column> </el-table> </div> <div class="save"> <el-button type="primary" @click="onSave">保存</el-button> </div> </div> </template> <script lang="ts" setup> import { ref } from 'vue'; import { ElMessage, ElMessageBox } from 'element-plus' const tableData = ref([{ riskLevel: '一级', minNumber: '60', color:'#da7171', describe: '严重风险', }, { riskLevel: '二级', minNumber: '30', color:'#f56c6c', describe: '高风险', }, { riskLevel: '三级', minNumber: '15', color:'#e6a23c', describe: '中风险', }, { riskLevel: '四级', minNumber: '7', color:'#67c23a', describe: '低风险', }, { riskLevel: '五级', minNumber: '3', color:'#67c23a', describe: '无风险', }]) const add = () => { } const edit = (row: any) => { console.log(row); } const onDelete = (row: any) => { console.log(row); ElMessageBox.confirm('此操作将删除该费率, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { ElMessage.success('删除成功!') }).catch(() => { ElMessage.error('删除失败!') }) } const onSave = () => { } </script> <style lang="scss" scoped> .content { margin-top: 20px; margin-right: 20px; width: 100%; .set-box { margin: 20px 0; width: 60%; padding-left: 16px; } .el-button { float: right; margin-bottom: 10px; } .el-table { margin: 20px 0; } .text-btn { font-size: 12px; color: #409EFF; cursor: pointer; } .del-btn { font-size: 12px; color: #F56C6C; margin-left: 6px; cursor: pointer; } .save { margin-top: 40px; padding-left: 16px; .el-button { float: left; width: 120px; } } } </style> 版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10688.html