day13--2023-08-07

今日内容

完善贷款产品页面

1、新增表单修改样式

1）文本域 https://element-plus.gitee.io/zh-CN/component/input.html

  <el-input
    v-model="textarea"
    maxlength="20"							//设置文字长度
 	:autosize="{ minRows: 2, maxRows: 4 }"	//调节文章高度
    type="textarea"							//文本域格式
    show-word-limit							//添加字数限制
    placeholder="Please input"
  />

2）Input Number 数字输入框

<el-input-number 
	v-model="num" 
	:min="1" 		//最小值
	:max="10"		//最大值
	:step="50" 		//控制步长
/>

3）Select选择器

<el-select v-model="value" placeholder="Select">
	<el-option
		v-for="item in options"
    	:key="item.value"
    	:label="item.label"			
     	:value="item.value"			//传递的值
      	:disabled="item.disabled"
    />
</el-select>

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
]

4）Radio单选框组

<el-radio-group v-model="radio">
    <el-radio label="月" >月</el-radio>		
	<el-radio label="年" >年</el-radio>
</el-radio-group>

2、增加搜索框功能

const searchName = ref('')
//搜索栏
	import { computed } from 'vue'
	const filterData = computed(()=>{
		return state.tableData.filter((row)=>{
			return row.name.includes(searchName.value)
		})
	})

3、增加批量删除功能

const handleMuchDel = ()=>{
		ElMessageBox.confirm(
			'您是否确认删除此纪录？',
			'提示',
			{ confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning'}
		)
		.then(()=>{
			//确认后，在此处进行遍历，一条一条删除
			multipleSelection.value.forEach(row =>{
				// handleDel(row.productId)	//有副作用，反复调用确认框
				ProductDel(row.productId)
				.then(res=>{
					toast("删除记录成功")
					loadingData(1, page.pageSize)
				})
				.catch(err=>{
					console.log(res)
				})
			})
			
		})
		.catch(()=>{					
		})
	}

4、完成日期转换

当日期类型不匹配时用new Date()函数转换

	//导入日期函数库
	import { format } from 'date-fns'
	const formatDate = (row, index, cellValue)=>{
		if(cellValue != null){
			return format(new Date(cellValue), 'yyyy-MM-dd')
		}
		return cellValue
	}

完成企业信息模块