前端基础学习-表格中添加下拉菜单

前端基础学习-表格中添加下拉菜单

先看一下效果

代码部分

	  <el-table-column label="下拉操作">
        <template slot-scope="scope">
          <el-dropdown>
              <span class="el-dropdown-link">下拉菜单</span>
              <el-dropdown-menu slot="dropdown">
                <el-row>
                  <el-col :span="12">
                    <el-dropdown-item>
                      <span @click="handleCheck(scope.row)">查看</span>
                    </el-dropdown-item>
                  </el-col>
                  <el-col :span="12">
                    <el-dropdown-item>
                      <span @click="handleDelete(scope.row)">删除</span>
                    </el-dropdown-item>
                  </el-col>
                </el-row>
              </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>

<style lang='scss' scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-dropdown-menu__item{
  color: #409EFF;
  font-size: 12px;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #fff;
}
</style>