vue表单元素新增删除上移下移等操作

数组元素的上移下移

1、移动的数组列表

const list = [
  { value: 1, label: "第一个" },
  { value: 2, label: "第二个" },
  { value: 3, label: "第三个" },
  { value: 4, label: "第四个" },
  { value: 5, label: "第五个" },
];

2、上移

方法一：

const index = 1;// 需要移动的元素的index
// 上移
// split方法会返回一个包含删除元素的数组
list.splice(index - 1, 1, ...list.splice(index, 1, list[index - 1]));
console.log(list);

方法二：

const index = 1;// 需要移动的元素的index
list.splice(index-1, 2, list[index],list[index-1])
console.log(list)

3、下移

const index = 1;// 需要移动的元素的index
方法一：
list.splice(index,1, ...list.splice(index+1,1,list[index]))
console.log(list)
// 方法二：

list.splice(index,2,list[index+1],list[index])
console.log(list)

补充置顶操作

list.unshift(list.splice(index,1)[0])

表单元素的操作

1、页面代码

<Form ref="form" :model="form" :label-width="130">
    <FormItem label="分组名称：" prop="name" :rules="namRules">
      <Row>
        <Col :span="20">
          <Input
            v-model="form.name"
            placeholder="请输入分组名称"
            maxlength="20"
            clearable
          ></Input>
        </Col>
      </Row>
    </FormItem>
    <FormItem
      v-for="(item, index) in subNames"
      :key="index"
      :label="index == 0 ? item.label : ''"
      :prop="`subNames_${index}`"
      :rules="subNameRules"
    >
      <Row :gutter="10">
        <Col :span="20">
          <Input
            v-model="form[`subNames_${index}`]"
            placeholder="请输入二级分组名称"
            maxlength="20"
            clearable
          ></Input>
        </Col>
        <Col :span="4" class="content-right-operate">
          <!-- 删除按钮 -->
          <Icon
            type="md-close"
            size="16"
            :style="{
              cursor: subNames.length == 1 ? disabledCursor : activeCursor,
            }"
            :color="
              subNames.length == 1 ? iconDisabledColor : iconActiveColor
            "
            @click="deleteItems(index)"
          />
          <div class="move-icons">
            <!-- 上移 -->
            <Icon
              type="md-arrow-dropup"
              size="16"
              :style="{
                cursor: index == 0 ? disabledCursor : activeCursor,
              }"
              :color="index == 0 ? iconDisabledColor : iconActiveColor"
              @click="handleMoveUp(index)"
            />
            <!-- 下移 -->
            <Icon
              type="md-arrow-dropdown"
              size="16"
              :style="{
                cursor:
                  index == subNames.length - 1
                    ? disabledCursor
                    : activeCursor,
              }"
              :color="
                index == subNames.length - 1
                  ? iconDisabledColor
                  : iconActiveColor
              "
              @click="handleMoveDown(index)"
            />
          </div>
        </Col>
      </Row>
    </FormItem>
    <FormItem label="" prop="subName1">
      <Button class="btn add-btn" @click="addItems">
        <Icon type="md-add" size="16" :color="iconActiveColor" />
        添加二级分组</Button
      >
    </FormItem>
  </Form>

2、删除、新增、上移、下移操作

data() {
    return {
      namRules: [
        {
          required: true,
          trigger: "blur",
          message: "分组名称不能为空",
        },
        {
          min: 1,
          max: 20,
          message: "分组名称最多为20个字符",
          trigger: "blur",
        },
      ],
      subNameRules: [
        {
          required: true,
          trigger: "blur",
          message: "二级分组名称不能为空",
        },
        {
          min: 1,
          max: 20,
          message: "二级分组名称最多为20个字符",
          trigger: "blur",
        },
      ],
      form: {
        name: "",
      },
      subNames: [{ value: "", label: "二级分组名称：", props: "subNames_0" }],
      iconDisabledColor: "rgb(184, 188, 196)",
      iconActiveColor: "rgb(22, 93, 255)",
      disabledCursor: "no-drop",
      activeCursor: "pointer",
    };
},

methods: {
  // 增加分组
  addItems() {
    const len = this.subNames.length;
    this.subNames.push({
      value: "",
      label: "二级分组名称：",
      props: `subNames_${len}`,
    });
  },
  // 删除分组
  deleteItems(index) {
    if (this.subNames.length == 1) return;
    const form_copy = JSON.parse(JSON.stringify(this.form));
    this.form = {
      name: form_copy.name,
    };
    this.subNames = this.subNames.reduce((calc, e, i) => {
      if (index == i) {
        return calc;
      }
      // 更新form
      this.form[`subNames_${calc.length}`] = form_copy[`subNames_${i}`];
      return [
        ...calc,
        {
          value: form_copy[`subNames_${i}`],
          label: e.label,
          props: `subNames_${calc.length}`,
        },
      ];
    }, []);
  },
  // 下移
  handleMoveDown(index) {
    if (index == this.subNames.length - 1) return;
    this.subNames.splice(
      index,
      2,
      {
        label: this.subNames[index + 1].label,
        props: `subNames_${index}`,
      },
      {
        label: this.subNames[index].label,
        props: `subNames_${index + 1}`,
      }
    );
    this.form = {
      ...this.form,
      [`subNames_${index}`]: this.form[`subNames_${index + 1}`],
      [`subNames_${index + 1}`]: this.form[`subNames_${index}`],
    };
  },
  // 上移
  handleMoveUp(index) {
    if (index == 0) return;
    this.subNames.splice(
      index - 1,
      2,
      {
        label: this.subNames[index].label,
        props: `subNames_${index - 1}`,
      },
      {
        label: this.subNames[index].label,
        props: `subNames_${index}`,
      }
    );
    this.form = {
      ...this.form,
      [`subNames_${index - 1}`]: this.form[`subNames_${index}`],
      [`subNames_${index}`]: this.form[`subNames_${index - 1}`],
    };
  },
},

3、需求效果图

文章摘录自：

• vue对数组元素的上移下移和置顶等操作