el-table里的状态切换

最新推荐文章于 2024-07-23 16:18:36 发布

日富一日付小姐

最新推荐文章于 2024-07-23 16:18:36 发布

阅读量721

点赞数 2

分类专栏： vue 文章标签： javascript css vue.js html

本文链接：https://blog.csdn.net/weixin_49222645/article/details/113390898

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

项目中的一个小块，记下来以后要是遇到用方便一点
在这里插入图片描述
html

<el-table :data="tableData" stripe style="width: 100%">
          <el-table-column
            prop="date"
            label="日程表"
            align="center"
            class-name="weekdays"
            width="100"
          >
          </el-table-column>
          <el-table-column label="上午" align="center">
            <template slot-scope="scope">
              <div v-for="(ele, index) in scope.row.am.title" :key="index">
                <span
                  v-if="index == scope.row.am.currentId"
                  style="
                    display: inline-block;
                    margin-left: 10px;
                    cursor: pointer;
                  "
                  >{{ ele }}
                </span>
                <div class="myToggle" v-if="index == scope.row.am.currentId">
                  <div class="upper" @click="change(scope.row.id, 'am')"></div>
                  <div class="lower" @click="change(scope.row.id, 'am')"></div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="pm" label="下午" align="center">
            <template slot-scope="scope">
              <div v-for="(ele, index) in scope.row.pm.title" :key="index">
                <span
                  v-if="index == scope.row.pm.currentId"
                  style="
                    display: inline-block;
                    margin-left: 10px;
                    cursor: pointer;
                  "
                  >{{ ele }}
                </span>
                <div class="myToggle" v-if="index == scope.row.pm.currentId">
                  <div class="upper" @click="change(scope.row.id, 'pm')"></div>
                  <div class="lower" @click="change(scope.row.id, 'pm')"></div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>

 tableData: [
    {
      id: 0,
      date: "周一",
      am: {
        currentId: 0,
        title: ["休息", "坐诊"],
      },
      pm: {
        currentId: 0,
        title: ["休息", "坐诊"],
      },
    },
    {
      id: 1,
      date: "周二",
      am: {
        currentId: 0,
        title: ["休息", "坐诊"],
      },
      pm: {
        currentId: 0,
        title: ["休息", "坐诊"],
      },
    },
    {
      id: 2,
      date: "周三",
      am: {
        currentId: 0,
        title: ["休息", "坐诊"],
      },
      pm: {
        currentId: 0,
        title: ["休息", "坐诊"],
      },
    },
    {
      id: 3,
      date: "周四",
      am: {
        currentId: 0,
        title: ["休息", "坐诊"],
      },
      pm: {
        currentId: 0,
        title: ["休息", "坐诊"],
      },
    },
    {
      id: 4,
      date: "周五",
      am: {
        currentId: 0,
        title: ["休息", "坐诊"],
      },
      pm: {
        currentId: 0,
        title: ["休息", "坐诊"],
      },
    },
    {
      id: 5,
      date: "周六",
      am: {
        currentId: 0,
        title: ["休息", "坐诊"],
      },
      pm: {
        currentId: 0,
        title: ["休息", "坐诊"],
      },
    },
    {
      id: 6,
      date: "周日",
      am: {
        currentId: 0,
        title: ["休息", "坐诊"],
      },
      pm: {
        currentId: 0,
        title: ["休息", "坐诊"],
      },
    },
  ]

   change(row, col) {
      //   console.log(this.tableData[row][col])
      this.tableData[row][col].currentId = !this.tableData[row][col].currentId;
    },