Element: Transfer 穿梭框自定义输入框,选择框，加必填的校验

最新推荐文章于 2024-07-23 15:45:06 发布

热爱编程的小灰灰

最新推荐文章于 2024-07-23 15:45:06 发布

阅读量836

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/gongxinhui89/article/details/134466056

版权

<template>
    <div>
      <el-form ref="addFormRef" :model="addForm" :rules="rules">
        <el-transfer
          style="text-align: left; display: inline-block;"
          v-model="valueList"
          :titles="['未选字段', '已选字段']"
          :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}'
        }"
          v-loading="loading"
          :props="defaultProps"
          :data="addForm.datadata">
          <div slot-scope="{ option }">
            <span>{{ option.label }}</span>
            <span style="float: right;display: flex;" v-if="valueList.indexOf(option.value)!==-1">
            <el-form-item v-if="option.value==='1'" :prop="'datadata.' + Number(option.sortOrder-1) + '.regularStr'" :rules="rules.regularStr" style="width: 100px;">
              <el-input v-model="option.regularStr" placeholder="请输入"/>
            </el-form-item>
            <el-form-item :prop="'datadata.' + Number(option.sortOrder-1) + '.joinStr'" :rules="rules.joinStr" style="width: 100px;">
              <el-select v-model="option.joinStr" placeholder="请选择">
                <el-option v-for="(item, index) in assetList" :key="index" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </span>
          </div>
        </el-transfer>
      </el-form>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        rules:{
          regularStr:[
            { required: true, message: '请输入', trigger: 'blur' },
          ],
          joinStr: [
            { required: true, message: '请选择', trigger: 'blur' },
          ]
        },
        addForm: {
          datadata: [
            {
              value: '1',
              label: '备选项1',
              joinStr: '',
              regularStr: '',
              sortOrder: 1
            },
            {
              value: '2',
              label: '备选项2',
              joinStr: '',
              regularStr: '',
              sortOrder: 2
            },
            {
              value: '3',
              label: '备选项3',
              joinStr: '',
              regularStr: '',
              sortOrder: 3
            },
            {
              value: '4',
              label: '备选项4',
              joinStr: '',
              regularStr: '',
              sortOrder: 4
            },
            {
              value: '5',
              label: '特殊备选项',
              joinStr: '',
              regularStr: '',
              sortOrder: 5
            }
          ],
        },
        defaultProps: {
          key: 'value',
          label: 'label'
        },
        valueList: ['1','2','5'],
        assetList:[
          {
            label: '选项一',
            value: 1
          },
          {
            label: '选项二',
            value: 2
          },
        ],
        loading: true
      };
  },
  created() {
    setTimeout(()=>{
      this.loading = false;
    },1000);
  },
  methods: {
    onSubmit() {
      this.$refs['addFormRef'].validate((valid) => {
        if (valid) {
          this.$message.success('保存成功');
        } else {
          this.$message.error('请检查是否有未填项');
        }
      })

    }
  },
};
</script>

<style lang="scss">
  .el-form-item--small.el-form-item{
    margin: 0px !important;
  }
  .el-transfer-panel {
    width: 450px !important;
  }
</style>