应急预案弹窗

13937891274

2022-07-07 dc1a337bae00425ce6b1f68a96d3a7418d4a0926

 src/components/userSelections/index.vue

@@ -18,7 +18,7 @@
            :filter-node-method="filterNode"
          />
        </el-aside>
        <el-container>
        <el-container style="margin-right: 15px;min-width:560px;">
          <el-header style="font-size: 12px">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
@@ -40,11 +40,19 @@
                  :data="tableData"
                  :header-cell-style="{background:'#f6f7fa',color:'#909399',fontWeight:400}"
                  ref="multipleTableRef"
                  highlight-current-row
                  @row-click="rowClick"
                  @selection-change="handleCurrentChange"
              >
                <el-table-column
                  type="selection"
                  width="50"
                >
                </el-table-column>
                <el-table-column prop="date" label="登录名" width="100" show-overflow-tooltip sortable />
                <el-table-column prop="name" label="用户名" width="100" show-overflow-tooltip sortable />
                <el-table-column prop="address" label="所属机构" width="130"  show-overflow-tooltip sortable />
                <el-table-column prop="address" label="所属部门" width="130" show-overflow-tooltip sortable/>
                <el-table-column prop="address" label="所属机构" width="110"  show-overflow-tooltip sortable />
                <el-table-column prop="address" label="所属部门" width="100" show-overflow-tooltip sortable/>
                <el-table-column  label="状态"
                  prop="tag"
                  width="100"
@@ -66,8 +74,12 @@
            </el-scrollbar>
          </el-main>
        </el-container>
        <div>
          <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)">
            {{ tag }}
          </el-tag>
        </div>
      </el-container>

      <template #footer>
            <span class="dialog-footer">
               <el-button size="default" type="primary"  @click="onCancel">确定</el-button>
@@ -95,6 +107,11 @@
  id: number
  label: string
  children?: Tree[]
}
interface User {
  date: string
  name: string
  address: string
}
export default defineComponent({
  name: 'userSelections',
@@ -196,6 +213,25 @@
    }

    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    // const currentRow = ref()

    // 当某一行被点击时会触发该事件
    // const handleRowClick = (row: any, column: any, event: Event) => {
    //   emit('row-click', row, column, event)
    // }
    // const singleTableRef = ref<InstanceType<typeof ElTable>>()
    // const setCurrent = (row?: User) => {
    //   singleTableRef.value!.setCurrentRow(row)
    // }
    // const handleCurrentChange = (val: User | undefined) => {
    //   currentRow.value = val
    // }

    // 右方点击添加后显示标签
    const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
    const handleClose = (tag: string) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
    };
    return {
      openDialog,
      closeDialog,
@@ -207,7 +243,12 @@
      tableData,
      formInline,
      onSubmit,
      multipleTableRef
      // currentRow,
      // setCurrent,
      multipleTableRef,
      handleClose,
      dynamicTags,
      // handleCurrentChange,
    };
  },
});
@@ -277,4 +318,14 @@
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
//单选框圆形
::v-deep .el-table__header .el-table-column--selection .cell .el-checkbox {
  display:none
}
::v-deep .el-table-column--selection .cell{
  text-align: center;
}
::v-deep .el-checkbox__input .el-checkbox__inner{
  border-radius: 50%;
}
</style>