vue3 + elementUI 自定义表单校验规则与表头排序和筛选

功能需求，完成公司内部项目的用户模块的增删改查功能，并使用列表展示，可以进行数据筛选。

1. 新建用户，用户名唯一；

2. 分页筛选，可以根据用户名邮箱等查询；

3. 表格数据筛选功能，根据表头的字段进行排序或者筛选。

功能实现：

后端：django+django_rest_framework

1. 后端接口实现用户名唯一校验；唯一返回200；否则返回404（当然也可以设置为其他状态码）

接口设计：***/check/username/

请求方法：post 

请求参数类型:json

请求示例：

{"username":"tyler"}

后端视图，使用def框架视图包装器@api_view，实现单功能接口：

@api_view(['post'])
def valiteUsername(request):
    objs = User.objects.all()
    username = request.data.get('username')
    try:
        objs.get(username=username)
        return Response({'msg':'用户名已存在！','unique':'false'}, status=404)
    except:
        return Response({'msg':f'{username},ok','unique':'true'},status=200)

url：

path('check/username/', valiteUsername, name='check_username')

响应示例：

2. 后端使用drf框架自带的分页过滤，在其基础上封装一个全局的分页配置

3. 设置过滤器

前端：vue3 + elementUi

封装上述接口，在组件对象中调用该接口：

        methods:{
        // 验证用户名唯一
        async checkUserName(params) {
            const response = await this.$api.checkUsername(params)
            return response.status
        },
        ...
       }

data() {
        // 自定义校验函数，调用后端接口判断输入的用户名是否唯一
        const validateUserName = async (rule, value, callback) => {
            if (value) {
                await this.checkUserName({ username: value }).then((response) => {
                    if (response !== 200) {
                        callback(new Error('用户名已存在！'));
                    }
                    else {
                        callback();
                    }
                })
            }
        };
        return {
            ...
        }

在data中定义表单校验的规则

            addRules: {
                username: [
                    { required: true, message: '登录用户名必填！', trigger: 'blur' },
                    { min: 3, max: 20, message: '用户名长度必须在3-20个字符！', trigger: 'blur' },
                    { validator: validateUserName, trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码必填！', trigger: 'blur' },
                    { min: 6, max: 20, message: '密码长度必须在6-20个字符！', trigger: 'blur' },
                    { validator: validatePasswrod2, trigger: "blur" }
                ],
                password_confirm: [
                    { required: true, message: '确认密码必填！', trigger: 'blur' },
                    { min: 6, max: 20, message: '确认密码长度必须在6-20个字符！', trigger: 'blur' },
                    { validator: validatePasswrod1, trigger: "blur" }
                ],
                email: [{ type: 'email', message: '请输入正确的邮箱！', trigger: 'blur' }],
                mobile: [{ pattern: /^1[3-9][0-9]\d{8}$/, message: "请输入正确的手机号码！", trigger: 'blur' }]
            },

表单组件中绑定此规则：

表单输入校验中，此输入框没失去一次焦点就会发送一次请求，判断输入的用户是否已存在

功能完成！

表头排序和过滤

过滤

使用tale组件的isActiveList和filter-method属性：

在列中设置 filters 和 filter-method 属性即可开启该列的筛选。

• filters ：筛选的下拉列表，是一个json数组，里面的json对象是 { text: ‘’, value: ‘’ } 的格式，text是下拉选项的显示内容，value则为选择的值；
• filter-method ：筛选时触发的方法，是一个函数，会传入三个参数：value, row 和 column，它的作用是决定某些数据是否显示。

html部分：

<el-table-column label="***" :filters="isActiveList" :filter-method="fliterActive" prop="is_superuser">

js部分：

1.定义过滤规则，value的值为过滤列的值：data中定义

isActiveList: [
                { text: '启用', value: true },
                { text: '禁用', value: false }
            ],

2. methods中定义filter-method属性的方法

        // 表头过滤---启用/禁用
        fliterActive(value, row, column) {
            const property = column['property']
            return row[property] === value
        },

value:定义的校验规则中的value，ture或者false

row：相当于scpoe.row; column['property'] 获取筛选列porp属性的值，当前列绑定的对象字段为is_active

过滤的底层实现其实就是遍历每一行的数据，判断 scope.row.is_active === value 而决定当前row的数据是否显示。

如当选择启用时，is_active的值为true，过滤规则的值为true，显示当前这条数据

注意: el-table-column 中prop属性必须定义，否则column['property']获取不到筛选的列。

分页或者条件查询时，清除过滤器：使用table组件的方法：clearFilter

如在获取用户列表时，加上：if (this.$refs.showUser) { this.$refs.showUser.clearFilter() };

排序

el-table-column 加上sortable和 column-key即可。column-key和prop的值一样，指定当前列是对象的哪个属性。如果使用了插槽没有使用prop，使用排序时，prop属性必须存在
<el-table-column label="创建时间" width="180" sortable column-key="date_joined" prop="date_joined">