element ui Tree组件

- 阅读剩余部分 -

技术选型

Ruoyi-Vue
Springboot 2.0
vue2

前端传值

代码

queryParams: {
          pageNum: 1,
          pageSize: 10,
          isAsc:"desc",
          orderByColumn:"add_date",
          infomationid: null,
          goodId: null,
          }

后端Java代码

记录一个javafx代码:https://www.jianshu.com/p/4be58cb79d47

(如果没有文章 占位)

element ui分步骤计算数据

element ui 表单操作

1.日期选择器

例子:

   <el-date-picker
      v-model="dateRange"
      size="small"
      style="width: 240px"
      value-format="yyyy-MM-dd"
      type="daterange"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    ></el-date-picker>

   设置默认日期:dateRange: [this.getNowTime(new Date() - 86400000 *10), this.getNowTime(new Date())],
    getNowTime(temp) {
        var now = new Date(temp);
        var year = now.getFullYear();     //得到年份
        var month = now.getMonth() + 1; //得到月份
        var date = now.getDate();         //得到日期
        month = month.toString().padStart(2, "0");
        date = date.toString().padStart(2, "0");
        return `${year}-${month}-${date}`;
      },

2.复选框和单选框

3.下拉选择框

<el-form-item label="类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择类型(支出/收入/收款/付款/转账)">
                <el-option
                  v-for="dict in typeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
</el-form-item>

按钮

 
  <el-form-item label="是否默认">
          <el-radio-group v-model="form.isDefault">
            <el-radio
              v-for="dict in isDefaultOptions"
              :key="dict.dictValue"
              :label="parseInt(dict.dictValue)"
            >{{dict.dictLabel}}</el-radio>
          </el-radio-group>
  </el-form-item>

js:

this.getDicts("isDefault").then(response => {
  console.log("11111111"+response.data);
  this.isDefaultOptions = response.data;

});

element | el-input 绑定点击事件

@click.native

table行编辑事件

:@row-click

<el-table :data="yshopPurchaseOrderItemsList" @row-click="selectGoods" :row-class-name="rowYshopPurchaseOrderItemsIndex" @selection-change="handleYshopPurchaseOrderItemsSelectionChange" ref="yshopPurchaseOrderItems">

      <el-table-column type="selection" width="50" align="center" />

</el-table>

table 新增行 弹窗事件

参考文档:https://juejin.cn/post/7040046051306242085

https://blog.csdn.net/lh1144151563/article/details/122601746