Vue表单操作的小tips

效果图：

<template>
  <el-form :inline="true" :rules="dataRules" label-width="140px" ref="dataForm" :model="dataForm"
           label-position="right">
    <el-row>
      <el-form-item prop="dataDate" class="search-card" label="数据日期">
        <el-date-picker
            v-model="dataForm.dataDate"
            type="date"
            value-format="yyyy-MM-dd"
            class="dateInput"
            @change="dataDateChange"
            clearable
        ></el-date-picker>
      </el-form-item>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item prop="week" label="星期">
          <el-select class="formFrame" v-model="dataForm.week" disabled>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

  </el-form>
</template>

<script>
export default {
  data(){
    return{
      weeks: {
        "0":'星期日',
        "1":'星期一',
        "2":'星期二',
        "3":'星期三',
        "4":'星期四',
        "5":'星期五',
        "6":'星期六',
      },
      dataForm:{
        dataDate: '',
        week: ''
      }
    }
  },
  methods: {
    dataDateChange(dateStr) {
      let date = new Date(dateStr);
      let weekIndex = date.getDay();
      this.dataForm.week = this.weeks[weekIndex];
    }
  }
}
</script>

<style scoped>

</style>

参考文献：

Vue 中根据当前的日期显示当前是星期几_candybaby1223的博客-CSDN博客

 Vue 表单时间格式_马卫斌的博客-CSDN博客

<el-form-item label="时间" prop="pjsj">
	<el-date-picker clearable style="width: 100%" v-model="formyd.pjsj" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间"></el-date-picker>
</el-form-item>

 Java 根据日期计算星期几_itmyhome的专栏-CSDN博客_java根据日期计算星期几

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;

public class DateTools {

    /**
     * 日期转星期
     * 
     * @param datetime
     * @return
     */
    public static String dateToWeek(String datetime) {
        SimpleDateFormat f = new SimpleDateFormat("yyyy-MM-dd");
        String[] weekDays = { "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" };
        Calendar cal = Calendar.getInstance(); // 获得一个日历
        Date datet = null;
        try {
            datet = f.parse(datetime);
            cal.setTime(datet);
        } catch (ParseException e) {
            e.printStackTrace();
        }
        int w = cal.get(Calendar.DAY_OF_WEEK) - 1; // 指示一个星期中的某天。
        if (w < 0)
            w = 0;
        return weekDays[w];
    }

    public static void main(String[] args) {
        System.out.println(DateTools.dateToWeek("2017-01-01"));
    }
}

另一种写法：

  @Test
    void testgetweek(){//6.14(星期一)
//        weeks: {
//            "0":'星期日',
//                    "1":'星期一',
//                    "2":'星期二',
//                    "3":'星期三',
//                    "4":'星期四',
//                    "5":'星期五',
//                    "6":'星期六',
//        },
        Date date = new Date();
        int day = date.getDay();
        System.out.println(day);
    }

element-ui表格列el-table-column如何根据数据不同显示不同的值_u010007013的博客-CSDN博客_el-table-column

<el-table ref="accountTable"
  :data="accountsListData"
  border>
  <el-table-column label="状态" prop="state" :formatter="stateFormat"></el-table-column>
</el-table>

methods:{
  stateFormat(row, column) {
    if (row.state === true) {
      return '正确'
    } else  {
      return '错误'
    } 
  },
}