zoukankan      html  css  js  c++  java
  • 在操作下面可以有下拉列表 选择不同的内容 并且互不影响

    1==》在操作下面可以有下拉列表  选择不同的内容 并且互不影响
    
    使用【Select 选择器】 的基础用法
    
    1bug==>
    不能够将选中的样似  输入表单中
    因为你将 <template slot-scope="scope">这个删除了
    解决如下
    
          <el-table-column label="操作">
            <template slot-scope="scope">  //new add
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>       
            </template>
          </el-table-column>
    
    
    2 bug==>不能够让一个发生改变 所有的都在发生改变 
    是因为共用了一个v-model的原因
    动态绑定v-model
    当你发现是v-model的原因,你就去动态绑定v-model,发现原因比解决问题更重要

    完整代码如下

    <template>
      <div>
        <el-table :data="tableData" style=" 100%">
          <el-table-column label="日期" width="180">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
    
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.zhi"
                placeholder="请选择"
                @change="change(scope.$index, scope.row)"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          tableData: [
            {
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄",
              zhi: "全部"
            },
            {
              date: "2016-05-04",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄",
              zhi: "全部"
            },
            {
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
              zhi: "全部"
            },
            {
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
              zhi: "全部"
            }
          ],
    
          // 操作数据开始
          options: [
            {
              value: "1",
              label: "黄金糕"
            },
            {
              value: "2",
              label: "双皮奶"
            },
            {
              value: "3",
              label: "蚵仔煎"
            },
            {
              value: "4",
              label: "龙须面"
            },
            {
              value: "5",
              label: "北京烤鸭"
            }
          ]
    
          // end-----
        };
      },
    
      methods: {
        change(index, row) {
          console.log(index, row);
        }
      }
    };
    </script>

  • 相关阅读:
    pytorch 之cuda语义
    pytorch 的自动求导机制-----requiers_grad 和volatile
    pytorch 之 Variable
    pytorch的安装
    【路径规划】OSQP曲线平滑 公式及代码
    【Ubuntu 1】ubuntu的软件包及便携系列 记录
    【路径规划】 The Dynamic Window Approach to Collision Avoidance (附python代码实例)
    【论文阅读】Learning to drive from a world on rails
    Motion Planning 是什么
    【路径规划】 Optimal Trajectory Generation for Dynamic Street Scenarios in a Frenet Frame (附python代码实例)
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/11694208.html
Copyright © 2011-2022 走看看