pbl-teacher-table/src/components/pages/studentManageNew/component/dia.vue

<template>
  <div class="dia_box">
    <el-dialog :title="title" :visible.sync="visible" width="500px">
      <div class="dia_box_item">
        <span>班级名称</span>
        <el-input v-model="classname" placeholder="请输入班级名称"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "dia",
  data() {
    return {
      title: "",
      visible: false,
      classname: '',
    };
  },
  methods: {
    confirm() {
      this.visible = false;
    },
  },
};
</script>

<style scoped>
.dia_box_item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dia_box_item span {
  width: 80px;
  flex-shrink: 0;
  text-align: right;
}
</style>