renren-vue开发使用笔记_renren-fast-vue开发文档-CSDN博客

本文链接：https://blog.csdn.net/weixin_44834916/article/details/124920762

本文档展示了如何在Vue项目中使用Element UI组件库创建按钮和自定义分页表格，包括编辑、分享、删除和搜索功能。同时，详细说明了表格列的字体颜色变化以及Echarts图表的初始化和动态数据绑定。还涉及表单验证、生命周期钩子、数据处理方法以及Git操作的介绍。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图标

<template>
  <div class="flex">
    <el-button type="primary" :icon="Edit"></el-button>
    <el-button type="primary" :icon="Share"></el-button>
    <el-button type="primary" :icon="Delete"></el-button>
    <el-button type="primary" :icon="Search">Search</el-button>
    <el-button type="primary">
      Upload<el-icon class="el-icon--right"><Upload /></el-icon>
    </el-button>
  </div>
</template>
<script setup lang="ts">
import { Edit, Share, Delete, Search, Upload } from '@element-plus/icons-vue'
</script>

自定义分页

表格

  <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%" v-if="tabPage === 'hardware'">
      <el-table-column prop="id" :label="$t('id')" header-align="center" align="center"></el-table-column>
      <el-table-column prop="ip" :label="$t('ebc.ip')" header-align="center" align="center"></el-table-column>
      <el-table-column prop="manufacturer" :label="$t('ebc.manufacturer')" header-align="center" align="center"></el-table-column>
      <el-table-column prop="brand" :label="$t('ebc.brand')" header-align="center" align="center"></el-table-column>
      <el-table-column prop="model" :label="$t('ebc.model')" header-align="center" align="center"></el-table-column>
      <el-table-column prop="deviceOsName" :label="$t('ebc.deviceOsName')" header-align="center" align="center"></el-table-column>
    </el-table>
    <el-pagination :current-page="pagesize" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handlePageChange"></el-pagination>

方法
this.limit 和 this.pagesize需在定义变量

 //每页下拉显示数据
    handleSizeChange(limit: number) {
      this.limit = limit;
      this.getHardwareList();
    },
    //点击第几页
    handlePageChange(pagesize: number) {
      this.pagesize = pagesize;
      this.getHardwareList();
    },
    //查询用户设备信息
    getHardwareList() {
      this.dataListLoading = true;
      baseService
        .get(`/crm/customerdevicelogin/page?customerId=${this.dataForm.id}&delFlag=0&page=${this.pagesize}&limit=${this.limit}`)
        .then((res) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.dataList = [];
            this.total = 0;
            return ui.error(res.msg);
          }
          this.dataList = res.data.list;
          this.total = res.data.total;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },

必填验证问题：进页面就会触发trigger: “change“表单校验

进入时会触发必填验证
代码

     //初始化的时候重置表单，清空效验规则
      this.$nextTick(() => {
        this.$refs["el-form标签上ref的值"].resetFields();
      })

生命周期页面

//配置项的形式使用生命周期钩子
beforeRouteLeave(){
 console.log("beforeRouteLeave");
},
activated() {
    console.log("activated");
  },
  ondestroyed(){
    console.log("ondestroyed");
  },
  beforeCreate(){
    console.log('beforeCreate');
    this.resetForm();
  },
  created(){
    console.log('created');
  },
  beforeMount(){
    console.log('beforeMount');
  },
  mounted(){
    console.log('mounted');
  },
  beforeUpdate(){
    console.log('beforeUpdate');
  },
  updated(){
    console.log('updated');
  },
  beforeUnmount(){
    console.log('beforeUnmount');
  },
  unmounted(){
    console.log('unmounted');
  }

el-table-column 字体颜色改变

      <el-table-column prop="isLock" :label="$t('ebc.frozen_State')" header-align="center" align="center" width="100">
        <template v-slot="scope" style="color:red">
          <div :style="{ color: scope.row.isLock === 0 ? '#606266' : 'red' }">
            {{ getDictLabel("frozen_state", scope.row.isLock) }}
          </div>
        </template>
      </el-table-column>

echarts

<div ref="myRef" :style="{ width: '100%', height: '500px'}"></div>

export default defineComponent({
//页面进入初始化样式
  setup() {
    const name=ref(null)
    const state = reactive({
      getDataListURL: "/sys/ureport2/page",
      getDataListIsPage: true,
      deleteURL: "/sys/ureport2",
      deleteIsBatch: true,
      totalNumber: 0,
      lineData:[0, 0, 0, 0,0, 0,0, 0,0, 0,0, 0 ],
      lineWeekData:[1],
      lineDayData:[],
      yearData:null,
      year:null,
      dataForm: {
        changeData:"month",
        time: "",
      },
    });
    const myRef:any = ref(null);//定义myRef任意类型,赋初值为null

    onMounted(() => {
      renderChart() // 生命周期挂载函数渲染图表
    })
    const renderChart = () => { //定义echarts样式
      const myChart = echarts.init(myRef.value)
      myChart.setOption({
        tooltip: {
          "trigger": 'axis'
        },
        legend: {
          data: ['新增用户', ]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '新增用户',
            type: 'line',
            stack: 'Total',
            data: state.lineData
          },
        ]
      })
    }
    return{ //暴露定义的变量
      ...toRefs(state),
      myRef
    }
  },
  methods: {
   //动态赋值
    //日期选择月
    echartsInitMonth() {
      this.lineData = [2000, 600, 852, 258,987, 580,60, 0,10, 780,320, 7 ]
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.myRef)
      // 绘制基本图表
      myChart.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '新增用户',
            type: 'line',
            stack: 'Total',
            data: this.lineData
          }
        ]
      })
    },
  }
});

计算选择的某年有几周

    getWeek(year) {
      const weekData =[];
      const yearnew:any  =year;
      this.lineWeekData = [];
      var d = new Date(yearnew, 0, 1);
      while (d.getDay() != 1) {
        d.setDate(d.getDate() + 1);
      }
      var to = new Date(yearnew + 1, 0, 1);
      var i = 1;
      for (var from = d; from < to;) {
        weekData.push(yearnew + "年第" + i + "周 "
          + (from.getMonth() + 1) + "月" + from.getDate() + "日 - ");
        from.setDate(from.getDate() + 6);
        if (from < to) {
          weekData.push((from.getMonth() + 1) + "月" + from.getDate() + "日<br / >");
          from.setDate(from.getDate() + 1);
        } else {
          to.setDate(to.getDate() - 1);
          weekData.push((to.getMonth() + 1) + "月" + to.getDate() + "日<br / >");
        }
        this.lineWeekData.push(i);
        i++;
      }
       console.log("周集合",this.lineWeekData)
      console.log("周集合明细",weekData)
    },

url中对字符的处理

+    URL 中+号表示空格                   %2B   
空格 URL中的空格可以用+号或者编码           %20 
/   分隔目录和子目录                       %2F     
?    分隔实际的URL和参数                  %3F     
%    指定特殊字符                         %25     
#    表示书签                            %23     
&    URL 中指定的参数间的分隔符           %26     
=    URL 中指定参数的值                  %3D

多参数get请求

baseService.get(`/bbc/bankhandlingfeeinformation/page?tradeType=${this.dataForm.tradeType}&tradeTag=${this.dataForm.tradeTag}`).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataList = res.data.list;
        });

table 选中一行数据返回本行数据

if (this.dataListSelections && this.dataListSelections.length !== 0) {
        let data: any = [];
        this.dataListSelections.map((item) => {
          data.push(item.id);
        });
        this.visible = true;
        return data;
      } else {
        this.$message.error("请选择产品！");
      }

必填验证

  computed: {
    dataRule() {
      const validator = (rule: any, value: any, callback: any) => {
        if (this.dataForm1.lxhbankAccountDTO.accountNo == "" || this.dataForm1.lxhbankAccountDTO.accountNo == null) {
          callback(new Error("必填项不能为空"));
        } else if (this.dataForm1.lchbankAccountDTO.accountNo == "" || this.dataForm1.lchbankAccountDTO.accountNo == null) {
          callback(new Error("必填项不能为空"));
        } else {
          callback();
        }
      };
      return {
        lcAccountNo: [{ required: true, validator: validator, trigger: "blur" }],
        lxAccountNo: [{ required: true, validator: validator, trigger: "blur" }]
      };
    }
  },

//提交时验证
 this.$refs["dataFormRef"].validate((valid: boolean) => {
        if (!valid) {
          return false;
        }
        //保存方法
         baseService.post(.......)
  });

集合循环赋值

  productTypeId = this.dataList.filter((item) => item.id === ids_data[0])[0].productTypeId;

自定义table分页

##表格


<el-table :data="frozenRecordsList">
      <el-table-column property="operator" label="冻结用户号"></el-table-column>
      <el-table-column property="operatorName" label="冻结用户姓名"></el-table-column>
      <el-table-column property="operateReason" label="冻结原因"></el-table-column>
      <el-table-column property="operateDate" label="冻结时间">
        <template v-slot="scope">
          {{ timestampToTime(scope.row.operateDate) }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="dataFormSubmit.pagesize" :page-sizes="[10, 20, 50, 100]" :page-size="dataFormSubmit.limit" :total="dataFormSubmit.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handlePageChange"></el-pagination>

##script

  export default defineComponent({
  setup() {
    const store = useStore();
    const state = reactive({
      dataFormSubmit: {
        customerId: "",
        type: 0,
        operateReason: "",
        status: "",
        limit: 10,
        pagesize: 1,
        total: 0,
        currentPage: 1,
        statusTagCode: ""

      }
    });
    let view = useView(state);

    return { ...view, ...toRefs(state), timestampToTime };
  },
  watch: {},
  methods: {
    //冻结数据查询
    findFrozenRecordsList() {},
	//每页下拉显示数据
    handleSizeChange(limit: number) {
      this.dataFormSubmit.limit = limit;
       this.findFrozenRecordsList();
    },
    //点击第几页
    handlePageChange(pagesize: number) {
      this.dataFormSubmit.pagesize = pagesize;
       this.findFrozenRecordsList();
    }
    }
});

git 撤回 push 的代码

在这里插入图片描述

git reset --soft 复制的版本号粘在这里

撤回后提交的代码将在回到本地,是未提交的状态

方法返回赋值

this.dataFormAppversion 集合中的默认值会被 res.data覆盖掉,但是res.data为空时则不覆盖

 baseService.get("/sys/appversiondetail/" + id).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        console.log(res.data);
        this.dataFormAppversion = {
          ...this.dataFormAppversion,
          ...res.data
        };
      });