带有上移/下移/删除功能的el-card卡片

_初见.

于 2024-08-26 15:10:48 发布

阅读量159

点赞数 8

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_72586861/article/details/141564537

版权

1.效果展示

2.数据

const cards = ref([
  {
    content: '信息1',
    input: '',
    required: true,
    cardRadio: '手机号码',
    radio: [
      {
        value: '单行文本'
      },
      {
        value: '手机号码'
      },
      {
        value: '身份证'
      },
      {
        value: '多行文本'
      },
      {
        value: '地址'
      }
    ]
  },
  {
    content: '信息2',
    input: '',
    required: true,
    cardRadio: '多行文本',
    radio: [
      {
        value: '单行文本'
      },
      {
        value: '手机号码'
      },
      {
        value: '身份证'
      },
      {
        value: '多行文本'
      },
      {
        value: '地址'
      }
    ]
  }
])

3.html结构,逻辑很简单,我就不加注释了

      <el-card
                    v-for="(card, index) in cards"
                    :key="index"
                    class="card"
                    style="width: 90%; margin-bottom: 15px"
                  >
                    <template #header>
                      <div class="card-header">
                        <div>{{ card.content }}</div>
                        <div>
                          <el-button
                            type="text"
                            icon="arrow-up"
                            @click="moveUp(index)"
                            :disabled="index === 0"
                            >上移</el-button
                          >
                          <el-button
                            type="text"
                            icon="arrow-down"
                            @click="moveDown(index)"
                            :disabled="index === cards.length - 1"
                            >下移</el-button
                          >
                          <el-button
                            type="danger"
                            link
                            icon="delete"
                            @click="removeCard(index)"
                            :disabled="cards.length == 1"
                            >删除</el-button
                          >
                        </div>
                      </div>
                    </template>
                    <div>
                      <el-radio-group v-model="card.cardRadio">
                        <el-radio :value="x.value" v-for="(x, y) in card.radio" :key="y">{{
                          x.value
                        }}</el-radio>
                      </el-radio-group>
                      <div style="display: flex; align-items: center">
                        <el-input
                          v-model="card.cardRadio"
                          class="!w-300px"
                          :placeholder="card.cardRadio"
                          maxlength="5"
                          show-word-limit
                        >
                          <template #prepend>{{ card.cardRadio }}</template>
                        </el-input>
                        <el-input
                          v-model="card.input"
                          class="!w-350px"
                          placeholder="请输入提示语"
                          maxlength="20"
                          show-word-limit
                          style="margin-left: 10px"
                        />
                        <el-checkbox
                          v-model="card.required"
                          label="必填"
                          style="margin-left: 10px"
                        />
                      </div>
                    </div>
                  </el-card>

4.上移下移删除方法

// 上移
function moveUp(index) {
  if (index > 0) {
    const temp = cards.value[index - 1]
    cards.value[index - 1] = cards.value[index]
    cards.value[index] = temp
  }
}
//下移
function moveDown(index) {
  if (index < cards.value.length - 1) {
    const temp = cards.value[index + 1]
    cards.value[index + 1] = cards.value[index]
    cards.value[index] = temp
  }
}
//删除
function removeCard(index) {
  cards.value.splice(index, 1)
}