vue+element+echarts常用组件2、（树组件、弹窗表单新增、修改复用提交表单），方便快速搭建页面

1、树

 <el-tree
          :data="leftTree"
          v-loading="loading2"
          :expand-on-click-node="false"
          style="height: 92%;overflow: auto; margin-top: 10px;"
          @node-click="handleNodeClick"
          :default-expand-all="false"
          element-loading-text="数据加载中"
        >
          <span slot-scope="{ data }">
            <i :class="data.iconCls" style="margin-left: -10px;"></i>
            <span style="padding-left: 4px;overflow: auto; ">{{
              data.label
            }}</span>
          </span>
        </el-tree>

 data() {
     return {
               leftTree: [],
               loading2: true,
    };
   },
//触发树获取leftTree值变为x参数
  handleNodeClick(x) {
      this.dalei = x.id;
    },

2、弹窗表单，包含表单验证

   <!--新增弹窗-->
    <el-dialog
      title="安规条款信息"
      :visible.sync="user_form_show"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="user_form"
        :rules="rules"
        ref="user_form"
        label-width="90px"
        class="demo-ruleForm"
        style="padding-right:45px"
      >
        <el-form-item label="条款编号" prop="ruleNum">
          <el-input v-model="user_form.ruleNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="条款内容" prop="ruleValue">
          <el-input
            type="textarea"
            :rows="6"
            v-model="user_form.ruleValue"
            autocomplete="off"
            maxlength="4000"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="user_form_show = false">取消</el-button>
        <el-button
          type="primary"
          v-if="add_user_show"
          @click="add_user1('user_form')"
          >确 定</el-button
        >
        <el-button
          type="primary"
          v-if="edit_user_show"
          @click="edit_user1('user_form')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

 data() {
     return {
   user_form_show: false,
      /*表格确定方法判断*/
      edit_user_show: false,
      add_user_show: false,
    user_form: {
        ruleNum: "",
        ruleValue: "",
        id: ""
      },
  rules: {
        ruleNum: [
          { required: true, message: "请输入安规条款编号", trigger: "blur" },
          {
            validator: function(rule, value, callback) {
              if (
                /^d+.d+$/g.test(value) == true ||
                /^d+.d+.d+$/g.test(value) == true ||
                /^d+.d+.d+.d+$/g.test(value) == true
              ) {
                callback();
              } else {
                callback(new Error("请输入正确的安规条款编号,至多为四级"));
              }
            },
            trigger: "blur"
          }
        ],
        ruleValue: [
          { required: true, message: "请输入安规条款内容", trigger: "blur" }
        ]
      }
    };
   },

//methods方法
 // 弹窗下方触发添加按钮
    add_user1(formName) {
      let that = this;
      let params = {};
      that.$refs[formName].validate(valid => {
        if (valid) {
          params = this.user_form;
          (that.urls = "rule/save"),
            commonPost(that.urls, params, function(res) {
              that.$message({
                message: res.msg,
                type: res.type
              });
              that.selectUser();
              that.user_form_show = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },


//触发修改按钮
   edit_user1(formName) {
      let that = this;
      let params = {};
      that.$refs[formName].validate(valid => {
        if (valid) {
          params = this.user_form;

          (that.urls = "rule/save"),
            commonPost(that.urls, params, function(res) {
              that.selectUser();
              that.user_form_show = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },