elementUI 的el-dialog作为子组件，父组件如何控制其关闭的按钮

标签：el const deviceName elementUI item deviceId 组件 id recentOnlineTime

这里有三点需要说明：

1. 使用：before-close="closeHandle" 将其 $emit() 出去

2. 取消按钮 也需要$emeit出去

3. 控制对话框显示隐藏的变量需要props给父组件来传值，这个相当重要，不然控制不了对话框的显示隐藏

4.1,2步骤是为了在子组件不再重复操作显示隐藏的变量，vue会报错

<template>
  <el-dialog
    title="选择设备"
    width="1000px"
    class="select-device-dialog"
    v-model="dialogShow"
    destroy-on-close
    :close-on-click-modal="false"
    :modal-orgend-to-body="false"
    :append-to-body="true"
    :before-close="handleClose"
  >
    <div class="dialog-box">
      <div class="search-box">
        <el-select
          placeholder="请选择产品分类"
          class="select-product-class"
          v-model="searchForm.productClass"
          multiple
          clearable
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="2"
        >
          <el-option label="小米产品" value="1" />
          <el-option label="涂鸦产品" value="2" />
          <el-option label="建大仁建" value="3" />
          <el-option label="Modbus网关" value="4" />
          <el-option label="通用产品" value="5" />
        </el-select>
        <el-select
          placeholder="请选择产品"
          class="select-product"
          v-model="searchForm.product"
          multiple
          clearable
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="2"
        >
          <el-option label="窗帘电机" value="1" />
          <el-option label="人体存在传感器" value="2" />
          <el-option label="三开开关" value="3" />
          <el-option label="双开开关" value="4" />
          <el-option label="单开开关" value="5" />
          <el-option label="空调控制器" value="6" />
          <el-option label="湿度传感器" value="7" />
          <el-option label="温度传感器" value="8" />
          <el-option label="通用产品" value="9" />
        </el-select>
        <el-select
          placeholder="请选择设备组"
          class="select-device-group"
          v-model="searchForm.deviceGroup"
          multiple
          clearable
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="3"
        >
          <el-option label="公共设备组" value="1" />
        </el-select>
        <el-input
          v-model="searchForm.deviceName"
          class="input-device"
          placeholder="请输入设备名称"
          clearable
        />
        <el-input
          v-model="searchForm.deviceId"
          class="input-device"
          placeholder="请输入设备ID"
          clearable
        />
        <div class="">
          <span class="btn btn-deault" @click="search">查询</span>
          <span class="btn btn-plain" @click="reset">重置</span>
        </div>
      </div>
      <el-table style="width: 100%" max-height="300" :data="deviceList">
        <el-table-column prop="deviceName" label="设备名称">
          <template #default="{ row }">
            <span class="orange-text" @click="selectDevice(row)">{{
              row.deviceName
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deviceId" label="设备ID" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <span v-if="row.status === '1'" style="color: #55bc8a">已启用</span>
            <span v-else style="color: #f56c6c">已禁用</span>
          </template>
        </el-table-column>
        <el-table-column prop="onLineStatus" label="在线状态" />
        <el-table-column prop="describe" label="描述" />
        <el-table-column prop="recentOnlineTime" label="最近在线时间" />
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="{ row }">
            <el-button link type="warning" @click="detailClick(row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, watch, computed, nextTick } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
  isShow: {
    type: Boolean,
    default: false
  }
})
const searchForm = ref({
  productClass: '',
  product: '',
  deviceGroup: '',
  deviceName: '',
  deviceId: ''
})

const emits = defineEmits(['update:isShow', 'getDevice'])
const dialogShow = computed({
  get: () => props.isShow,
  set: (value) => {
    emits('update:isShow', value)
  }
})

const deviceList = ref([
  {
    id: '11',
    deviceName: '会议室东窗帘',
    deviceId: 'cl2',
    status: '1',
    onLineStatus: '',
    describe: '',
    recentOnlineTime: ''
  },
  {
    id: '12',
    deviceName: '办公室开关',
    deviceId: 'cl2',
    status: '1',
    onLineStatus: '',
    describe: '',
    recentOnlineTime: ''
  },
  {
    id: '13',
    deviceName: '人体感应一',
    deviceId: 'cl2',
    status: '1',
    onLineStatus: '',
    describe: '',
    recentOnlineTime: ''
  },
  {
    id: '14',
    deviceName: '大会议室开关一',
    deviceId: 'rt1',
    status: '1',
    onLineStatus: '',
    describe: '',
    recentOnlineTime: ''
  },
  {
    id: '15',
    deviceName: '走廊开关一',
    deviceId: 'switch6',
    status: '1',
    onLineStatus: '',
    describe: '',
    recentOnlineTime: ''
  },
  {
    id: '16',
    deviceName: '餐厅三空调',
    deviceId: 'kt6',
    status: '1',
    onLineStatus: '',
    describe: '',
    recentOnlineTime: ''
  }
])
const selectDevice = (item) => {
  if (item) {
    emits('getDevice', item)
  }
}
const search = () => {
  console.log('search')
}
const reset = () => {
  searchForm.value = {
    productClass: '',
    product: '',
    deviceGroup: '',
    deviceName: '',
    deviceId: ''
  }
}

const handleClose = () => {
  emits('getDevice', {})
}
const detailClick = (row) => {
  const newUrl = router.resolve({
    name: 'entity-device'
  })
  window.open(newUrl.href, '_blank')
  localStorage.setItem('deviceId', row.id)
}
</script>

<style lang="scss" scoped>
.search-box {
  display: flex;
  flex-wrap: wrap;
  .el-input,
  .el-select {
    width: 310px;
    margin: 0 10px 10px 0;
  }
  .btn-deault {
    margin-left: 0;
  }
}
</style>

<style lang="scss">
.select-device-dialog {
  .el-dialog__body {
    padding-top: 3px;
    padding-bottom: 20px;
  }
}
</style>

父组件：

const getDevice = (item) => {   selectDeviceVisible.value = false   if (item.deviceName) {     currentRow.value.device = item.deviceName   } }

标签：el,const,deviceName,elementUI,item,deviceId,组件,id,recentOnlineTime
From： https://www.cnblogs.com/guwufeiyang/p/17920856.html