airoptweb/src/components/cloudChart/dialog/DomainDialog.vue

<template>
  <SubDialog
    :modelValue="modelValue"
    @update:modelValue="$emit('update:modelValue', $event)"
    title="域"
    width="600"
    height="500px"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <div>
      <el-row style="margin-bottom: 10px;" :gutter="20">
        <el-col v-for="(item,index) in domainbtnbox1" :key="index" :span="8">
          <el-button style="width: 100%;">{{ item }}</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 10px;" :gutter="20">
        <el-col v-for="(item,index) in domainbtnbox2" :key="index" :span="8">
          <el-button style="width: 100%;">{{ item }}</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="classtable tabledomain">
      <el-table 
        :data="tableDatadomain" 
        style="width: 100%; height: 230px" 
        border="true" 
        :header-cell-class-name="headerCellClassName"
      >
        <el-table-column prop="rowname" label="域名称" />
        <el-table-column
          v-for="(item, index) in tabledomainColumns"
          :key="index"
          :prop="item.prop"
          :label="item.label"
        >
          <template #default="{ row }">
            <el-input v-model="row[item.prop]" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </SubDialog>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'
import SubDialog from './SubDialog.vue'

const props = defineProps({
  modelValue: Boolean,
  initialData: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])

// 按钮数据
let domainbtnbox1 = ref(['显示全部','隐藏全部','倒转互换'])
let domainbtnbox2 = ref(['显示','隐藏','表面绘制'])

// 表格数据
let tableDatadomain = ref([
  {rowname:"Z1", state:'1', type:'2', area:'3'},
  {rowname:"Z2", state:'1', type:'2', area:'3'},
  {rowname:"Z3", state:'1', type:'2', area:'3'},
  {rowname:"Z4", state:'1', type:'2', area:'3'},
  {rowname:"Z1", state:'1', type:'2', area:'3'},
  {rowname:"Z2", state:'1', type:'2', area:'3'},
  {rowname:"Z3", state:'1', type:'2', area:'3'},
  {rowname:"Z4", state:'1', type:'2', area:'3'},
])

// 表格列配置
let tabledomainColumns = ref([
  {label:"状态", prop:'state'},
  {label:"绘制类型", prop:'type'},
  {label:"平面范围", prop:'area'},
])

// 表头样式
const headerCellClassName = ({ column }) => {
  // console.log('列：',column.property)
  if (column.property === 'state') {
    console.log('yanse',column.property)
    return 'header-blue';
  } else if (column.property === 'type') {
    return 'header-green';
  } else if (column.property === 'area') {
    return 'header-yellow';
  }
  return '';
};

// 确认操作
const handleConfirm = () => {
  emit('confirm', tableDatadomain.value)
  emit('update:modelValue', false)
}

// 取消操作
const handleCancel = () => {
  emit('cancel')
  emit('update:modelValue', false)
}
</script>

<style scoped>
.classtable.tabledomain {
  margin-top: 20px;
}
/* 表头样式 */
:deep(.header-cell) {
  background-color: #f5f7fa;
  font-weight: bold;
}
</style>