LayUI Table 添加禁止选中

  1. 1. Fork LayUI源码
  2. 2. 添加字段标记
  3. 3. 修改代码逻辑
  4. 4. 测试
  5. 5. 源码

LayUI这几年比较流行,里面的Table组件也比较强大,但是前面的CheckBox没有禁止选中功能,今天就来试试,看看能不能给添加一个禁止选中功能。

Fork LayUI源码

  • LayUI项目地址
  • Clone到本地
  • 找到src里面lay下面的modules文件夹里面的table.js

添加字段标记

  • 参照这里我们也添加一个”IS_DISABLE”的标记
    2019-05-22-16-14-50

  • 添加完如下

    1
    2
    3
    4
    5
    config: {
    checkName: 'LAY_CHECKED', //是否选中状态的字段名
    indexName: 'LAY_TABLE_INDEX', //下标索引名
    disableName: 'LAY_DISABLED' //是否禁用
    } //全局配置项

修改代码逻辑

  • 找到区域模板里面的 lay-filter="layTableAllChoose"
    2019-05-22-14-55-15

  • 在后面添加如下代码

    1
    {{# if(item2[d.data.disableName]){ }} disabled {{# }; }} 
  • 添加列渲染
    2019-05-22-16-02-15

  • 修改选择逻辑
    2019-05-22-16-12-51
    2019-05-22-16-13-23

  • 详细修改请点这里

测试

  • 在数据里面添加 "LAY_DISABLED": true,
  • 来看看效果
    1234

源码

×
  • 微信扫一扫

  • 支付宝扫一扫

分享代码改变世界