前端菜鸟，都这个年代了，vue出来那么久了，自定义组件的使用，组件间的传值还不会使用~

最近用element ui做了一个项目，终于用了一次自定义组件。

下面是设计图：

但是因为有几个界面的差异较大，不只是操作栏的按钮不同，所以这个要用自定义组件，根据上面状态栏的条件下面表格切换。

文件布局如图：

代码如下：

jzdd.vue  

<template>
  <div class="el-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        label-width="77px"
        class="ele-form-search"
        @keyup.enter.native="reload"
        @submit.native.prevent
      >
        <el-row :gutter="15">
          <el-col :md="6" :sm="12">
            <el-form-item label="兼职标题:">
              <el-input clearable v-model="where.title" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :md="6" :sm="12">
            <div class="ele-form-actions">
              <el-button
                type="primary"
                icon="el-icon-search"
                class="ele-btn-icon"
                @click="reload"
                >查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 根据城市查询帖子 -->
      <el-form ref="form" :model="form" :rules="rules" label-width="82px">
        <el-row :gutter="15">
          <el-col :sm="12">
            <el-form-item label="选择城市:" prop="city_id">
              <el-select
                @change="changeinfo2"
                clearable
                class="ele-block"
                v-model="where.city_id"
                placeholder="全部"
              >
                <el-option
                  v-for="item in city_list"
                  :key="item.id"
                  :label="item.city_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="选择状态:" prop="status">
              <el-select
                @change="changeinfo"
                clearable
                class="ele-block"
                v-model="where.status"
                placeholder="待审核"
              >
                <el-option
                  v-for="item in status_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 结算弹框 -->
    <el-dialog
      title="结算"
      :visible.sync="showjiesuan"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="82px">
        <el-col :sm="24">
          <el-form-item label="结算金额：" prop="cash">
            <el-input
              type="text"
              placeholder="请输入结算金额"
              v-model="form.cash"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer" class="footer">
        <el-button @click="updateVisible(false)">取消 </el-button>
        <el-button type="primary" :loading="loading" @click="save"
          >确定
        </el-button>
      </div>
    </el-dialog>

    <!-- 数据表格1 待审核 -->
    <ele-pro-table
      v-if="where.status == 0"
      ref="table"
      :where="where"
      :datasource="url"
      :columns="columns"
      :parseData="parseData"
      :selection.sync="selection"
    >
      <!-- 状态列 -->
      <template slot="state" slot-scope="{ row }">
        <el-switch
          :active-value="0"
          :inactive-value="1"
          v-model="row.status"
          @change="editState(row)"
        />
      </template>
      <!-- 城市过滤 -->
      <template slot="state1" slot-scope="{ row }">
        {{ row.city_id | typea }}
      </template>
      <!-- 结算方式 -->
      <template slot="state2" slot-scope="{ row }">
        {{ row.pay_type | typeb }}
      </template>
      <!-- 操作列 -->
      <template slot="action" slot-scope="{ row }">
        <el-button type="primary" class="ele-btn-icon" @click="signUp(row)"
          >审核报名
        </el-button>
      </template>
    </ele-pro-table>

    <!--数据表格 1已审核 4待审核 -->
    <div v-if="where.status == 1 || where.status == 4">
      <Toaudit :wheres="where"></Toaudit>
    </div>

    <!-- 数据表格3 未通过 -->
    <div v-if="where.status == 3">
      <Wtg :wheres="where"></Wtg>
    </div>

    <!-- 数据表格 2已取消 -->
    <div v-if="where.status == 2">
      <Qx :wheres="where"></Qx>
    </div>

    <!-- 数据表格5 已结算 -->
    <div v-if="where.status == 5">
      <Wc :wheres="where"></Wc>
    </div>
  </div>
</template>

js:

import Wc from "./wca.vue";
import Toaudit from "./toAudit.vue";
import Wtg from "./wtg.vue";
import Qx from "./qx.vue";
export default {
  components: {
    Toaudit,
    Wtg,
    Wc,
    Qx
  },
  filters: {
    //城市过滤
    typea(val) {
      let cities = JSON.parse(sessionStorage.getItem("cities"));
      for (let i = 0; i < cities.length; i++) {
        if (val == cities[i].id) {
          return cities[i].city_name;
        } else if (val == 0) {
          return "全部";
        }
      }
    },
    //结算方式过滤
    typeb(val){
      if (val==0) {
        return "日结"
      }else if (val==1) {
        return "月结"
      }else if (val==3) {
        return "完工结"
      }
    },
  },
  data() {
    return {
      e: {},
      rules: {},
      showjiesuan: false,
      // 提交状态
      loading: false,
      city_list: [],
      status_list: [
        { id: 0, name: "待审核" },
        { id: 1, name: "已审核" },
        { id: 2, name: "已取消" },
        { id: 3, name: "未通过" },
        { id: 4, name: "待结算" },
        { id: 5, name: "已结算" }
      ],
      //表单数据
      form: Object.assign({}, this.data),
      // 表格数据接口
      url: "?s=Manage.Order.Job",
      // 表格列配置
      parseData: res => {
        console.log(res);
        return {
          code: res.code == 200 ? 0 : res.code,
          data: res.data.data,
          count: res.data.count
        };
      },

      columns: [
        {
          prop: "city_id",
          label: "城市",
          minWidth: 60,
          align: "center",
          slot: "state1"
        },
        {
          prop: "title",
          label: "兼职标题",
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: "company_name",
          label: "来源公司",
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: "credit_points_stint",
          label: "信用分要求",
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: "created_at",
          label: "兼职时间",
          showOverflowTooltip: true,
          minWidth: 110,
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(
              cellValue * 1000,
              "yyyy-MM-dd HH:mm:ss"
            );
          }
        },
        {
          prop: "pay_type",
          label: "结算方式",
          showOverflowTooltip: true,
          minWidth: 110,
          slot:"state2"
        },
        {
          prop: "wx_name",
          label: "报名用户",
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: "mobile",
          label: "手机号",
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: "user_credit_points",
          label: "用户信用分",
          showOverflowTooltip: true,
          minWidth: 110
        },

        {
          columnKey: "action",
          label: "操作",
          width: 160,
          align: "center",
          resizable: false,
          slot: "action"
        }
      ],
      // 表格搜索条件
      where: {
        title: "",
        city_id: 0,
        status: 0
      },
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false
    };
  },
  created() {
    let cities = JSON.parse(sessionStorage.getItem("cities"));
    this.city_list = cities;
    console.log(this.city_list);
    this.admin_city = sessionStorage.getItem("admin_city");
    let that = this;
    if (this.admin_city == 0) {
      this.city_list.unshift({ id: 0, city_name: "全部" });
    } else {
      this.city_list = this.city_list.filter(function(item) {
        return item.id == that.admin_city;
      });
    }
    console.log(this.city_list);
    this.where.city_id = this.city_list[0].id;
  },
  methods: {
    changeinfo() {
      // this.reload();
    },
    changeinfo2() {
      this.reload();
    },

    //结算
    settlement(e) {
      this.e = e;
      this.showjiesuan = true;
    },
    viewOrder(e) {
      console.log(e);
      this.e = e;
      this.show = true;
    },
    //审核报名
    signUp(row) {
      console.log(row);
      this.$confirm("是否通过审核报名?", "审核报名", {
        confirmButtonText: "通过",
        cancelButtonText: "不通过"
      })
        .then(() => {
          this.$http
            .post("?s=Manage.Order.AuditJob", { jobOrderId: row.id, status: 1 })
            .then(res => {
              console.log(res);
              if (res.data.data == "成功") {
                this.$message("审核通过");
                this.reload();
              }
            });
        })
        .catch(() => {
          this.$prompt("审核不通过备注", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消"
          })
            .then(({ value }) => {
              this.$http
                .post("?s=Manage.Order.AuditJob", {
                  jobOrderId: row.id,
                  status: 3,
                  remark: value
                })
                .then(res => {
                  console.log(res);
                  if (res.data.data == "成功") {
                    this.$message("已发送请求");
                    this.reload();
                  }
                });
              this.$message({
                type: "success",
                message: "不通过备注是: " + value
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "取消输入"
              });
            });
        });
    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({ page: 1 });
    },
    /* 重置搜索 */
    reset() {
      this.where = {};
      this.$nextTick(() => {
        this.reload();
      });
    },
    /* 显示编辑 */
    openEdit(row) {
      this.current = row;
      console.log(row);
      this.showEdit = true;
    },
    /* 保存编辑 */
    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          this.$http
            .post("?s=Manage.Order.Payment", {
              jobOrderId: this.e.id,
              cash: this.form.cash
            })
            .then(res => {
              this.loading = false;
              if (res.data.code === 200) {
                this.$message({ type: "success", message: "成功" });
                if (!this.isUpdate) {
                  this.form = {};
                }
                this.updateVisible(false);
                this.$emit("done");
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(e => {
              this.loading = false;
              this.$message.error(e.msg);
            });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.showjiesuan = false;
    }
  }
};

已审核  toAudit.vue

<!-- 数据表格1 已审核 -->
    <ele-pro-table
      ref="table"
      :where="where"
      :datasource="url"
      :columns="columns"
      :parseData="parseData"
      :selection.sync="selection"
    >
      <!-- 状态列 -->
      <template slot="state" slot-scope="{ row }">
        <el-switch
          :active-value="0"
          :inactive-value="1"
          v-model="row.status"
          @change="editState(row)"
        />
      </template>
      <!-- 城市过滤 -->
      <template slot="state1" slot-scope="{ row }">
        {{ row.city_id | typea }}
      </template>
      <!-- 结算方式 -->
      <template slot="state2" slot-scope="{ row }">
        {{ row.pay_type | typeb }}
      </template>
      <!-- 操作列 -->
      <template slot="action" slot-scope="{ row }">
        <el-button
          v-if="wheres.status == 4"
          type="primary"
          class="ele-btn-icon"
          @click="settlement(row)"
          >结算
        </el-button>
        <p v-else-if="wheres.status == 1">已通过</p>
      </template>
    </ele-pro-table>

js:

export default {
  name: "toaudit",
  props: {
    wheres: {
      type: Object
    }
  },
  filters: {
    //城市过滤
    typea(val) {
      let cities = JSON.parse(sessionStorage.getItem("cities"));
      for (let i = 0; i < cities.length; i++) {
        if (val == cities[i].id) {
          return cities[i].city_name;
        } else if (val == 0) {
          return "全部";
        }
      }
    },
    //结算方式过滤
    typeb(val){
      if (val==0) {
        return "日结"
      }else if (val==1) {
        return "月结"
      }else if (val==3) {
        return "完工结"
      }
    },
  },
  data() {
    return {
      selection: [],
      form: Object.assign({}, this.data),
      where: {
        title: this.wheres.title,
        status: this.wheres.status,
        city_id: this.wheres.city_id
      },
      // 表格数据接口
      url: "?s=Manage.Order.Job",
      // 表格列配置
      parseData: res => {
        console.log(res);
        return {
          code: res.code == 200 ? 0 : res.code,
          data: res.data.data,
          count: res.data.count
        };
      },
      columns: [
        {
          prop: "city_id",
          label: "城市",
          minWidth: 60,
          align: "center",
          slot: "state1"
        },
        {
          prop: "title",
          label: "兼职标题",
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: "company_name",
          label: "来源公司",
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: "credit_points_stint",
          label: "信用分要求",
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: "created_at",
          label: "兼职时间",
          showOverflowTooltip: true,
          minWidth: 110,
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(
              cellValue * 1000,
              "yyyy-MM-dd HH:mm:ss"
            );
          }
        },
        {
          prop: "pay_type",
          label: "结算方式",
          showOverflowTooltip: true,
          minWidth: 110,
          slot:"state2"
        },
        {
          prop: "wx_name",
          label: "报名用户",
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: "mobile",
          label: "手机号",
          showOverflowTooltip: true,
          minWidth: 110
        },
        
        {
          columnKey: "action",
          label: "操作",
          width: 160,
          align: "center",
          resizable: false,
          slot: "action"
        }
      ]
    };
  },
  methods: {
    signUps(e) {},
    //结算
    settlement(row) {
        console.log(row);
        //this.e = row;
        //this.showjiesuan = true;
        this.$prompt('请输结算金额', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
            this.$http.post("?s=Manage.Order.Payment",{jobOrderId:row.id,cash:value}).then(res=>{
                console.log(res);
                if (res.data.data=="成功") {
                    this.$message("您已结算成功！")
                    this.reload();
                }
            })
         this.$message({
            type: 'success',
            message: '结算金额是: ' + value
          });
        })
    },
    viewOrder(e) {
      console.log(e);
      this.e = e;
      this.show = true;
    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({ page: 1 });
    },
    /* 重置搜索 */
    reset() {
      this.where = {};
      this.$nextTick(() => {
        this.reload();
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.showjiesuan = false;
    }
  }
};

纵观以上代码，总结：

子组件：name: "toaudit",  声明，注册

props: {

    wheres: {

      type: Object

    }

  },//传递变量

父组件：

    

js:

import Toaudit from "./toAudit.vue";

components:{Toaudit}