archives/src/views/transfer/components/submit-report/table-opinion.vue

<template>
    <HcTable ui="no-border" is-new :index-style="{ width: 60 }" :column="tableColumn" :datas="tableData" :loading="tableLoading">
        <template #key3="{ row }">
            <el-input v-if="row.isEdit" v-model="row.key3" placeholder="请输入抽检意见" />
            <span v-else>{{ row.key3 }}</span>
        </template>
        <template #action="{ row }">
            <el-button v-if="row.isEdit" type="success" size="small" @click="saveClick(row)">
                保存
            </el-button>
            <el-button v-else type="primary" size="small" @click="editClick(row)">
                编辑
            </el-button>
            <el-button type="danger" size="small" @click="delClick(row)">
                删除
            </el-button>
        </template>
    </HcTable>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getArrValue } from 'js-fast-way'


//参数
const props = defineProps({
    projectId: {
        type: [String, Number],
        default: '',
    },
    contractId: {
        type: [String, Number],
        default: '',
    },
})

//变量
const projectId = ref(props.projectId)
const contractId = ref(props.contractId)

//渲染完成
onMounted(() => {

})

//表格数据
const tableColumn = ref([
    { key:'key1', name: '专家', width: 180 },
    { key:'key2', name: '抽检所属' },
    { key:'key3', name: '抽检意见' },
    { key:'action', name: '操作', width: 140, align: 'center' },
])
const tableData = ref([
    {
        id: 1,
        key1: '张三',
        key2: '一工区',
        key3: '滚动面板是一种承载长页面的容器，当你需要滚动显示内容时使用，xxx',
    },
    {
        id: 2,
        key1: '张三',
        key2: '业主',
        key3: '滚动面板是一种承载长页面的容器，当你需要滚动显示内容时使用，xxx',
    },
    {
        id: 3,
        key1: '李四',
        key2: '业主',
        key3: '滚动面板是一种承载长页面的容器，当你需要滚动显示内容时使用，xxx',
    },
])

const tableLoading = ref(false)

//编辑
const editClick = (row) => {
    row.isEdit = true
}
//保存
const saveClick = (row) => {
    row.isEdit = false
}
//删除
const delClick = (row) => {

}
</script>

<style lang="scss" scoped>

</style>