zan-sku-table

zan-sku-table

这是一个规格表格组件

使用场景

选择规格后，生成对应的规格表格

代码演示

:::demo 基础用法

import SKUTable from 'zan-sku-table';
import SKU from 'zan-sku';
import { Input } from 'zent'; 
 
const columns = [
  {
    title: '价格',
    default: 0,
    bodyRender(item) {
      return <Input value={item.price} />;
    }
  },
  {
    title: '库存',
    default: 0,
    bodyRender(item) {
      return <Input value={item.stock_num} />;
    }
  },
  {
    title: '商家编码',
    name: 'code'
  }
];
 
const SKUTree = [
  {
    id: 10740,
    kdt_id: 18884150,
    text: '你好'
  },
  {
    id: 40732,
    kdt_id: 18884150,
    text: 'hhh'
  },
  {
    id: 512521,
    kdt_id: 18884150,
    text: 'nihao'
  },
  {
    id: 572390,
    kdt_id: 18884150,
    text: '会员期限'
  },
  {
    id: 18496487,
    kdt_id: 18884150,
    text: 'channel'
  },
  {
    id: 19610451,
    kdt_id: 18884150,
    text: '普通胶水'
  },
  {
    id: 19610484,
    kdt_id: 18884150,
    text: '高级胶水'
  }
];
 
const SKULeaf = [
  {
    id: 3,
    text: '蓝色'
  },
  {
    id: 10,
    text: '红色'
  },
  {
    id: 30,
    text: '土豪金'
  },
  {
    id: 137,
    text: '黑色'
  },
  {
    id: 138,
    text: '灰色'
  }
];
 
 
class Simple extends Component {
  state = {
    skuData: []
  };
 
  fetchSKUTree() {
    return new Promise(resolve => {
      resolve(SKUTree);
    });
  }
 
  fetchSKU() {
    return new Promise(resolve => {
      resolve(SKULeaf);
    });
  }
 
  handleSKUChange = data => {
    this.setState({
      skuData: [].concat(data)
    });
  };
 
  render() {
    let { skuData } = this.state;
 
    return (
      <div>
        <SKU
          value={skuData}
          onFetchGroup={this.fetchSKUTree}
          onFetchSKU={this.fetchSKU}
          onChange={this.handleSKUChange}
        />
        <SKUTable data={SKU.flatten(skuData)} columns={columns} />
      </div>
    );
  }
}
 
ReactDOM.render(
    <Simple />
    , mountNode
);
 

:::

API

参数	说明	类型	默认值	备选值
className	自定义额外类名	string	''	''
data	表格数据	array	[]	[]
columns	表头配置，基本上和zan-table类似，多一个default的属性	array	[]	[]
footerRender	自定义footer	any	null	null
prefix	自定义前缀	string	'rc-sku-table'	null