vue 点击增加按钮增加一行下拉框,绑定下拉框值,点击删除按按钮删除对应行

<div>
  <div>
    <el-select class="el-select" v-model="form.label" placeholder="全部" clearable
               filterable>
      <el-option
        v-for="item in addList"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <span @click="add">新增</span>
  </div>
  <div v-for="(item, index) in form" :key="index">
    <el-select class="el-select" v-model="item.label" placeholder="全部" clearable
    filterable>
    <el-option
    v-for="item in addList"
    :key="item.value"
    :label="item.label"
    :value="item.value">
    </el-option>
    </el-select>
    <span class="delete" @click="deleteItem(index)">删除</span>
  </div>

</div>

export default {
  // 项目管理
  name: 'ProjectManageList',
  mixins: [pageMixin, exportModel],
  data() {
    return {
      form: [
      ],
addList: [
  {
    value: '老板',
    label: '老板'
  }, {
    value: '经理',
    label: '经理'
  }, {
    value: '主管',
    label: '主管'
  }
]
}
methods: {
add() {
  this.form.push({});
},
deleteItem(index) {
  this.form.splice(index, 1);
}
}


Vue3 中给下拉框的多个绑定点击事件弹出对应的统计图,可以采用以下步骤: 1. 在模板中,使用 `select` 元素创建下拉框,并使用 `v-model` 指令将选中的绑定一个 data 属性中; 2. 在 `select` 元素中,使用 `v-for` 指令遍历所有选项,并使用 `:value` 绑定每个选项的; 3. 在 `select` 元素中,使用 `@change` 绑定一个方法,当选中的发生变化时会触发该方法; 4. 在绑定的方法中,根据选中的显示对应的统计图,可以使用条件语句或者对象字面量来根据选中的判断应该显示哪个统计图。 下面是一个简单的示例代码: ``` <template> <div> <select v-model="selectedValue" @change="showChart"> <option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</option> </select> <div v-if="selectedValue === 'pie'"> <pie-chart></pie-chart> </div> <div v-else-if="selectedValue === 'bar'"> <bar-chart></bar-chart> </div> </div> </template> <script> import PieChart from './PieChart.vue' import BarChart from './BarChart.vue' export default { components: { PieChart, BarChart }, data() { return { selectedValue: '', options: [ { label: '饼图', value: 'pie' }, { label: '柱状图', value: 'bar' } ] } }, methods: { showChart() { if (this.selectedValue === 'pie') { // 显示饼图 } else if (this.selectedValue === 'bar') { // 显示柱状图 } } } } </script> ``` 在这个示例中,我们通过 `v-model` 将选中的绑定到 `selectedValue` 属性中,通过 `v-for` 遍历所有选项,并使用 `@change` 绑定 `showChart` 方法。在 `showChart` 方法中,根据选中的显示对应的统计图。注意,在模板中使用 `v-if` 和 `v-else-if` 来根据条件显示不同的组件。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值