数据表格,设置了可编辑后。表格项就可编辑,但用户用点一下才能编辑

提问 已结 10 228
小高a
小高a 2019-12-10
悬赏:20飞吻
版本:layui 浏览器:
怎么能 显示 的让用户知道可编辑。 我的想法是 给输入框 填一个 placeholder 属性,提示用户填写。但是发现输入框是点击才显示。大家有什么思路或者经验么
回帖
  • 少年郎
    2019-12-10

    可以在可编辑的单元格加个图标
    0 回复
  • xjie_127
    2019-12-10
    不应该会这样子把。。
    0 回复
  • 冥想盆
    2019-12-10
    说实话我也没找到什么好的提示方法,我就在表格下面加了个说明,2333,有好办法记得@
    0 回复
  • 冥想盆
    2019-12-10
    给你个链接提供思路,鼠标移入有提示文本,箭头变成输入箭头的样子
    https://www.helloweba.net/demo/editTable/
    0 回复
  • 小高a
    2019-12-10
    @少年郎 这个不错 你是怎么加上的
    0 回复
  • IDyun
    2019-12-10
    参考 @少年郎 图标方法

    <style>
    .layui-table-body td[data-edit="text"]:before {
    position: absolute;
    top: 10px;
    content: "\e642";
    font-family: layui-icon!important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    .layui-table-body td[data-edit="text"]:after {
    position: absolute;
    top: 10px;
    right: 0;
    content: "\e642";
    font-family: layui-icon!important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }
    </style>
    0 回复
  • 小高a
    2019-12-10
    @IDyun 谢谢你 嘿
    0 回复
  • 小高a
    2019-12-10
    @冥想盆 我觉得可以
    0 回复
  • 小高a
    2019-12-10
    @IDyun 还有一个小问题,我把字体图标放到右边,就会和 显示超出文字的 向下小箭头 有点小冲突,点击箭头 不灵敏了, 我可以手动 给他加个 Z-index么 会影响其他代码么?
    0 回复
  • IDyun
    2019-12-10
    不清楚有没有影响,不过也可以把向下小箭头禁用掉
    .layui-table-body td[data-edit="text"] .layui-table-grid-down {
    display: none;
    }
    0 回复