03-elementPlus

主要记录一下elementPlus相关的问题

修改css样式

https://blog.csdn.net/wangyile4399/article/details/115402411

直接加::v-deep

<style scoped>
    ::v-deep(.el-input__inner){
        background: aqua ;
        font-size: 30px ;
    }
</style>

表格合并

表格合并+自定义表头

<template>
    <div class="table-header-tool">
        <el-select
                v-model="chooseFiledList"
                multiple
                clearable
                collapse-tags
                placeholder="Select"
                popper-class="custom-header"
                :max-collapse-tags="1"
                style="width: 200px"
        >
            <div style="margin: 10px">
                <el-checkbox
                        v-model="checkAll"
                        :indeterminate="indeterminate"
                        @change="handleCheckAll"
                >
                    全选
                </el-checkbox>
            </div>
            <el-option
                    v-for="item in filedTitle"
                    :key="item"
                    :label="item"
                    :value="item"
            />
        </el-select>
    </div>
    <el-table :data="tableData" border :span-method="objectSpanMethod">
        <el-table-column v-if="chooseFiledList.indexOf('date')!=-1" prop="date" label="Date" />
        <el-table-column v-if="chooseFiledList.indexOf('name')!=-1" prop="name" label="Name" />
        <el-table-column v-if="chooseFiledList.indexOf('status')!=-1" prop="status" label="Status" />
    </el-table>
</template>

<script setup>
    import {ref, onMounted, nextTick, watch} from 'vue';
    import axios from 'axios';

    //是否全选
    const checkAll = ref(true)
    //是否半选
    const indeterminate = ref(false)
    //选中展示的字段
    const chooseFiledList = ref(['date','name','status'])
    //字段下拉列表
    const filedTitle = ref(['date','name','status'])

    //全选选中事件
    const handleCheckAll = (val) => {
        indeterminate.value = false
        if (val) {
            chooseFiledList.value = filedTitle.value.map(item => item)
        } else {
            chooseFiledList.value =[]
        }
    }
    //监控字段
    watch(chooseFiledList, (val) => {
        if (val.length === 0) {
            checkAll.value = false
            indeterminate.value = false
        } else if (val.length === filedTitle.value.length) {
            checkAll.value = true
            indeterminate.value = false
        } else {
            indeterminate.value = true
        }

        nextTick(()=>{
            //这边使用这个是为了 el-table-column中使用了v-if来判断和显示
            //如果不调用此方法的话，会出现样式错乱和滚动条无缘无故的出现等问题
            app.proxy.$refs.tableRef.doLayout()
        })
    })



    const tableData = ref([]);
    let hbObj = ref({})
    let propertyList = [
        'date'
    ]
    // 从后端获取数据
    const fetchData = async () => {
        // 示例：使用 axios 从后端获取数据
        const response = await axios.get('/2.json');
        tableData.value = response.data;
        hbObj.value = computeCell(response.data,propertyList)
    };

    // 合并单元格的逻辑
    const objectSpanMethod = ({
                                  row,
                                  column,
                                  rowIndex,
                                  columnIndex,
                              }) => {
        // console.log(row,column,rowIndex,columnIndex)
        let property = column.property

        if (propertyList.indexOf(property) != -1){
            let aList = hbObj.value[property]
            const fRow = aList[rowIndex]
            const fCol = fRow > 0 ? 1 : 0
            return {
                rowspan: fRow, // 合并的行数
                colspan: fCol // 合并的列数，为0表示不显示
            }
        }else{
            return [1,1]
        }
    }
    const computeCell = (data,propertyList) => {

        let result = {}
        for (let j = 0; j < propertyList.length; j++) {
            let property = propertyList[j]
            let list = []
            let curIndex = 0
            for (let i = 0; i < data.length; i++) {
                if (i == 0){
                    list.push(1)
                    curIndex = 0
                }else{
                    if (data[i][property] == data[i - 1][property]){
                        list[curIndex] += 1;
                        list.push(0);
                    }else{
                        list.push(1);
                        curIndex = i;
                    }
                }
            }
            result[property] = list
        }
        return result;
    }

    onMounted(() => {
        fetchData();
    });

</script>

<style scoped>
    .table-header-tool{
        display: flex;
        justify-content: end;
    }
</style>

表单校验

注意

1. 需要 :rules="rules"

2. 需要加上prop="account"

3. 需要ref="registerFormRef"

<template>
    <el-button type="primary" @click="dialogRegisterVisible = true">注册</el-button>

    <el-dialog v-model="dialogRegisterVisible"  title="用户注册" width="500">
        <el-form :model="registerForm" :rules="rules" ref="registerFormRef">
            <el-form-item label="账号" label-width="60px" prop="account">
                <el-input v-model="registerForm.account" autocomplete="off" clearable/>
            </el-form-item>
            <el-form-item label="密码" label-width="60px">
                <el-input v-model="registerForm.password" type="password" clearable autocomplete="off"/>
            </el-form-item>
            <el-form-item label="邮箱" label-width="60px">
                <el-input v-model="registerForm.email" clearable autocomplete="off"/>
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogRegisterVisible = false">取消</el-button>
                <el-button type="primary" @click="registerUser()">
                    注册
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
    import {reactive, ref} from 'vue'
    import {getCurrentInstance} from 'vue'

    const app = getCurrentInstance()
    let dialogRegisterVisible = ref(false)
    const registerForm = reactive({
        account: '',
        password: '',
        email: '',
    })
    const rules = {
        account: [
            {required: true, message: '账号必填', trigger: 'blur'},
            { min: 5, max: 10, message: '账号必须是5-10位字符', trigger: 'blur' }
        ],
        password: [
            {
              pattern: /^\S{6,15}$/,
              message: '密码必须是6-15位非空字符',
              trigger: 'blur'
            }
          ]
    }

    function registerUser() {
      app.proxy.$refs.registerFormRef.validate((valid) => {
        if (valid) {
          // 业务逻辑
        }
      });
    }

</script>