前端工作小结59-表单重置项目处理

简介: 前端工作小结59-表单重置项目处理
<template>
  <!--新建账号对话框-->
  <el-dialog title="新建账号" :visible.sync="dialogFormVisible" @close="close">
    <el-form ref="form" :model="form" size="medium" :label-width="formLabelWidth">
      <el-form-item prop="name" label="账号名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
       <!-- <el-button @click="resetLoginFrom">重置</el-button>-->
      </el-form-item>
      <el-form-item  label="所属平台" :label-width="formLabelWidth">
        <el-input v-model="form.platform" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="内容类型" :label-width="formLabelWidth">
        <el-input v-model="form.content_type" autocomplete="off"></el-input>
        <!--<el-select v-model="form.content_type"  placeholder="请选择内容类型">
          <el-option v-for="item in content_type" :label="item.text" :value="item.value"></el-option>
        </el-select>-->
      </el-form-item>
      <el-form-item label="所属部门" :label-width="formLabelWidth">
        <select-form @change="DepartmentList"  v-model="form.department_id" />
      </el-form-item>
      <el-form-item prop="business_module" label="所属栏目" :label-width="formLabelWidth">
        <!--注意用户的返回值-->
        <el-select v-model="form.business_module"  placeholder="请选择所属栏目" multiple>
          <el-option @click="resetLoginFrom" v-for="label in business_module" :label="label" :value="label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="column" label="所属单元" :label-width="formLabelWidth">
        <!--注意用户的返回值-->
        <el-select @click="resetLoginFrom" v-model="form.column"  placeholder="请选择所属栏目" multiple>
          <el-option  v-for="label in column" :label="label" :value="label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布类型" :label-width="formLabelWidth">
        <el-select v-model="form.resource_type" placeholder="请选择发布类型">
          <el-option label="头条" value="1"></el-option>
          <el-option label="次头条" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="刊例价" :label-width="formLabelWidth">
        <el-input v-model="form.price" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { AddEditDialogMixin } from "@/component/dialog/AddEditDialogMixin";
import SelectForm from "@/component/select/SelectFrom";
import {getAction} from "@/api";
export default {
  //注册组件
  components: { SelectForm},
  name: "create",
  mixins: [AddEditDialogMixin],
  data() {
    return {
      formLabelWidth: "140px",
      url: {
        add: "/account",
        edit: "/account",
        query: "/account"
      },
      business_module:[],
      column: []
    };
  },
 /* created() {
    this.list();
 /!*   this.account_content_type();*!/
  },*/
  computed: {
    fullTitle() {
      return this.title + "账号";
    }
  },
  methods: {
    /*封装网络请求 该数据为所属单元和所属项目*/
    DepartmentList(val) {
      this.resetLoginFrom()
    /*  this.$refs.form.resetFields()*/
        getAction("/department/attribute/"+val).then(res => {
          //回显数据
            this.business_module=res.data.business_module;
            this.column=res.data.column;
      });
    },
    resetLoginFrom(){
      this.$refs.form.resetFields()
    }
   /* account_content_type(){
      getAction('/dict/list', {dict_code: 'content_type'}).then(res => {
        this.content_type = res.data
      })
    }*/
  }
};
</script>
<style></style>
相关文章
|
2月前
|
前端开发 JavaScript
前端项目公共组件封装思想
该文介绍了如何封装通用组件,如表单搜索、表格展示和分页器。首先,通过抽离出公共部分,创建`TableContainer`组件,利用具名插槽插入`navbar`和`table`,并通过props传递标题。然后在父组件中使用具名插槽和子组件实现具体功能。文中还展示了更复杂的组件封装示例,通过props实现数据双向绑定,以`el-pagination`为例,利用`sync`修饰符和`computed`属性监听并更新父组件状态,实现分页功能。文章最后提到了内容来源于哪。
|
2月前
|
前端开发
Github项目分享——免费的画图工具drow,最新前端面试题整理
Github项目分享——免费的画图工具drow,最新前端面试题整理
|
1天前
|
前端开发
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
22 6
|
5天前
|
敏捷开发 缓存 前端开发
阿里云云效产品使用问题之流水线构建前端项目比较慢。该如何优化
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
11天前
|
前端开发 Shell 容器
前端练习小项目——视觉冲击卡片
前端练习小项目——视觉冲击卡片
|
21天前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
34 3
|
20天前
|
Web App开发 运维 前端开发
从0开始搭建一个前端项目的架子
从0开始搭建一个前端项目的架子
18 1
|
1天前
|
JavaScript 前端开发 API
koa2使用svg-captcha生成验证码接口(含前端vue项目中使用)
koa2使用svg-captcha生成验证码接口(含前端vue项目中使用)
4 0
|
27天前
|
存储 前端开发 Windows
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
|
2月前
|
前端开发 JavaScript
前端综合练手小项目
前端综合练手小项目