新增设备信息勾选

src/views/govern/terminal/planData/components/deviceInfo.vue

@@ -60,17 +60,20 @@
             </vxe-column>
         </vxe-table>
         <!-- 新增设备信息 -->
-        <el-dialog v-model="dialogVisible" width="65%"  title="添加设备" draggable :append-to-body="true">
+        <el-dialog v-model="dialogVisible" width="65%" title="添加设备" draggable :append-to-body="true">
             <vxe-table
                 border
                 show-overflow
-                ref="tableRef"
+                ref="checkTableRef"
                 :loading="loading"
                 align="center"
                 :data="tableData"
                 :edit-config="{ trigger: 'manual', mode: 'row' }"
+                @checkbox-all="selectAllChangeEvent"
+                @checkbox-change="selectChangeEvent"
             >
                 <!-- <vxe-column type="seq" width="60"></vxe-column> -->
+                <vxe-column type="checkbox" width="60"></vxe-column>
                 <vxe-column field="name" title="设备名称">
                     <template #edit="{ row }">
                         <vxe-input v-model="row.name" type="text"></vxe-input>
@@ -103,7 +106,7 @@
                 </vxe-column>
             </vxe-table>
             <template #footer="">
-                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button @click="close">取 消</el-button>
                 <el-button type="primary" @click="submit">确 定</el-button>
             </template>
         </el-dialog>
@@ -129,7 +132,7 @@ interface RowVO {
 }
 
 const tableRef: any = ref(null)
-
+const checkTableRef:any=ref(null)
 const loading = ref(false)
 const tableData = ref([
     {
@@ -232,6 +235,22 @@ const cancelRowEvent = (row: RowVO) => {
     }
 }
 
+const selectAllChangeEvent = (checked: any) => {
+    const $table = checkTableRef.value
+    if ($table) {
+        const records = $table.getCheckboxRecords()
+        console.log(checked ? '所有勾选事件' : '所有取消事件', records)
+    }
+}
+
+const selectChangeEvent = (checked: any) => {
+    const $table = checkTableRef.value
+    if ($table) {
+        const records = $table.getCheckboxRecords()
+        console.log(checked ? '勾选事件' : '取消事件', records)
+    }
+}
+
 //删除设备
 const delDevice = (row: any) => {
     console.log(row, '8888')
@@ -247,6 +266,10 @@ const open = () => {
 const submit = () => {
     console.log(6666)
 }
+const close=()=>{
+    dialogVisible.value = false;
+    checkTableRef.value.clearCheckboxRow()
+}
 </script>
 <style lang="scss" scoped>
 .table {