[JavaScript知识库]引入弹窗组件两种写法v-if || ￥refs

第一种：v-if方法
index.vue

<template>
  <div class="twoProcessTagContainer">
    <el-row style="background: #ffffff; padding: 20px 10px 0px">
      <el-col :span="24">
        <el-button type="primary" size="mini" @click="handleMoreRework">
          批量修改二次加工指标
        </el-button>
      </el-col>
    </el-row>

    <!-- 列表 -->
    <el-table
      border
      stripe
      :data="tableData"
      size="mini"
      :header-cell-class-name="headerRowClassName"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column label="操作" align="center" min-width="160px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            plain
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 多个编辑 -->
    <more-dialog
      v-if="moreShow"
      @close="close"
      @sureClose="sureClose"
      :checkedList="checkedList"
    ></more-dialog>

    <!-- 单个编辑 -->
    <edit-dialog
      v-if="editShow"
      @editClose="editClose"
      :row="row"
    ></edit-dialog>
  </div>
</template>
<script>
import editDialog from "./editDialog.vue";
import MoreDialog from "./moreDialog.vue";
export default {
  components: { editDialog, MoreDialog },
  data() {
    return {
      moreShow: false,
      editShow: false,
      checkedList: [],
      row: {},
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    headerRowClassName({ row, rowIndex }) {
      return "header_row";
    },
    handleMoreRework() {
      this.moreShow = true;
    },
    close() {
      this.moreShow = false;
    },
    sureClose() {
      this.moreShow = false;
    },
    handleSelectionChange(val) {
      this.checkedList = val;
    },

    handleEdit(index, row) {
      this.row = row;
      this.editShow = true;
    },
    editClose() {
      console.log("111");
      this.editShow = false;
    },
  },
};
</script>
<style lang="less">
.twoProcessTagContainer {
  ::v-deep .header_row {
    background: #f2f2f2;
    font-size: 14px;
    color: #333333;
    font-weight: 400;
  }
  ::v-deep .el-table .el-table__cell {
    padding: 12px 0;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
  }
  .el-form-item {
    margin-bottom: 20px;
  }
  .tagSelectSty .el-input {
    width: 100%;
  }

  .el-select {
    width: 100%;
  }
  .el-input {
    width: 100%;
  }
  .el-form-item__label {
    line-height: 28px;
  }
  .el-form-item__content {
    line-height: 28px;
  }

  .el-dialog__body {
    padding-right: 80px;
  }
}
</style>

editDialog.vue单个编辑

<template>
  <div>
    <!-- 单个编辑 -->
    <el-dialog
      title="提示"
      :visible.sync="editDialogVisible"
      width="30%"
      :before-close="close"
    >
      <el-form ref="form" :model="formEdit" label-width="150px">
        {{ row }}
        <el-form-item label="是否二次加工：">
          <el-select
            v-model="formEdit.address"
            placeholder="请选择"
            size="mini"
          >
            <el-option
              v-for="item in isReworkOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="特殊口径说明：">
          <el-input v-model="formEdit.date" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="数据分级标签：">
          <el-input v-model="formEdit.name" size="mini"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close" size="mini"> 取 消 </el-button>
        <el-button type="primary" @click="onSubmit" size="mini">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["row"],
  data() {
    return {
      editDialogVisible: true,
      formEdit: {},
      isReworkOption: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "2",
          label: "否",
        },
      ],
    };
  },
  methods: {
    onSubmit() {
      if (this.row) {
        this.$emit("editClose");
      }
    },
    close() {
      this.$emit("editClose");
    },
  },
};
</script>

<style>
</style>

moreDialog.vue多个编辑

<template>
  <div>
    <!-- 批量修改 -->
    <el-dialog
      title="提示"
      :visible.sync="moreDialogVisible"
      width="30%"
      :before-close="close"
    >
      {{ checkedList }}
      <el-form ref="form" :model="formMore" label-width="150px">
        <el-form-item label="是否二次加工：">
          <el-select v-model="formMore.rework" placeholder="请选择" size="mini">
            <el-option
              v-for="item in isReworkOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close" size="mini"> 取 消 </el-button>
        <el-button type="primary" @click="onMoreSubmit" size="mini">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["checkedList"],
  data() {
    return {
      moreDialogVisible: true,
      newCheckedList: [],

      formMore: {
        rework: "",
      },
      isReworkOption: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "2",
          label: "否",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    close() {
      this.$emit("close");
    },
    onMoreSubmit() {
      console.log("123");
      console.log("formMore", this.formMore);
      if (this.checkedList) {
        this.$emit("sureClose");
      }
    },
  },
};
</script>

<style>
</style>

第二种方法：￥refs方法
index.vue

<template>
  <div class="twoProcessTagContainer">
    <el-row style="background: #ffffff; padding: 20px 10px 0px">
      <el-col :span="24">
        <el-button type="primary" size="mini" @click="handleMoreRework">
          批量修改二次加工指标
        </el-button>
      </el-col>
    </el-row>

    <!-- 列表 -->
    <el-table
      border
      stripe
      :data="tableData"
      size="mini"
      :header-cell-class-name="headerRowClassName"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column label="操作" align="center" min-width="160px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            plain
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 多个编辑 -->
    <more-dialog ref="moreDialog"></more-dialog>

    <!-- 单个编辑 -->
    <edit-dialog ref="editDialog"></edit-dialog>
  </div>
</template>
<script>
import editDialog from "./editDialog.vue";
import MoreDialog from "./moreDialog.vue";
export default {
  components: { editDialog, MoreDialog },
  data() {
    return {
      checkedList: [],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    headerRowClassName({ row, rowIndex }) {
      return "header_row";
    },
    handleMoreRework() {
      this.$refs.moreDialog.moreDialogVisible = true;
      this.$refs.moreDialog.newCheckedList = this.checkedList;
    },
    handleSelectionChange(val) {
      this.checkedList = val;
    },

    handleEdit(index, row) {
      console.log("123", this.$refs.editDialog);
      this.$refs.editDialog.editDialogVisible = true;
      this.$refs.editDialog.formEdit = row;
    },
  },
};
</script>
<style lang="less">
.twoProcessTagContainer {
  ::v-deep .header_row {
    background: #f2f2f2;
    font-size: 14px;
    color: #333333;
    font-weight: 400;
  }
  ::v-deep .el-table .el-table__cell {
    padding: 12px 0;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
  }
  .el-form-item {
    margin-bottom: 20px;
  }
  .tagSelectSty .el-input {
    width: 100%;
  }

  .el-select {
    width: 100%;
  }
  .el-input {
    width: 100%;
  }
  .el-form-item__label {
    line-height: 28px;
  }
  .el-form-item__content {
    line-height: 28px;
  }

  .el-dialog__body {
    padding-right: 80px;
  }
}
</style>

editDialog.vue 单个编辑

<template>
  <div>
    <!-- 单个编辑 -->
    <el-dialog title="提示" :visible.sync="editDialogVisible" width="30%">
      <el-form ref="form" :model="formEdit" label-width="150px">
        <el-form-item label="是否二次加工：">
          <el-select
            v-model="formEdit.address"
            placeholder="请选择"
            size="mini"
          >
            <el-option
              v-for="item in isReworkOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="特殊口径说明：">
          <el-input v-model="formEdit.date" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="数据分级标签：">
          <el-input v-model="formEdit.name" size="mini"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false" size="mini">
          取 消
        </el-button>
        <el-button type="primary" @click="onSubmit" size="mini">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editDialogVisible: false,
      formEdit: {},
      isReworkOption: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "2",
          label: "否",
        },
      ],
    };
  },
  methods: {
    onSubmit() {
      this.editDialogVisible = false;
      console.log("formEdit!", this.formEdit);
    },
  },
};
</script>

<style>
</style>

moreDialog.vue 多个编辑

<template>
  <div>
    <!-- 批量修改 -->
    <el-dialog title="提示" :visible.sync="moreDialogVisible" width="30%">
      {{ newCheckedList }}
      <el-form ref="form" :model="formMore" label-width="150px">
        <el-form-item label="是否二次加工：">
          <el-select v-model="formMore.rework" placeholder="请选择" size="mini">
            <el-option
              v-for="item in isReworkOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="moreDialogVisible = false" size="mini">
          取 消
        </el-button>
        <el-button type="primary" @click="onMoreSubmit" size="mini">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      moreDialogVisible: false,
      newCheckedList: [],

      formMore: {
        rework: "",
      },
      isReworkOption: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "2",
          label: "否",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    onMoreSubmit() {
      console.log("123");
      this.moreDialogVisible = false;
    },
  },
};
</script>

<style>
</style>