vue3中，tabs标签页的使用、调用方法实现动态style

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>