ux-selected-list使用说明
项目运行
-
cnpm install 或 npm install cnpm使用教程
-
npm run dev (开发环境打包 port:8080)
-
npm run test (测试用例)
-
npm run build (生产环境打包)
ux-selected-list参数
{
totalCount: 1,//数据总数
hasCount: 1,//选择数据总数
openCount: true, //是否显示 选择数据总数/数据总数
titleText: "已选择",//组件标题
nullText: "请在左侧选择",//组件未选定数据时显示文本
resultsData: [{
name: '测试名称',
pname: '测试数据'
},{
name: '测试名称',
pname: '测试数据'
}],
clearResultsData: self.clearResultsData //清除当前已选数据,self=this在constructor中声明
}
ux-selected-list调用方法
1.安装npm组件包
npm install @beisen/ux-selected-list --save-dev
2.引用组件
import SelectedList from "@beisen/ux-selected-list"
3.传入参数
该参数为上述参数,传入方式使用: {...参数}
class Demo extends Component {
constructor(props) {
super(props)
let self = this;
this.state = {
totalCount: 1,//数据总数
hasCount: 1,//选择数据总数
openCount: true, //是否显示 选择数据总数/数据总数
titleText: "已选择",//组件标题
nullText: "请在左侧选择",//组件未选定数据时显示文本
resultsData: [{
name: '测试名称',
pname: '测试数据'
},{
name: '测试名称',
pname: '测试数据'
}],
clearResultsData: self.clearResultsData //清除当前已选数据,self=this在constructor中声明
}
}
clearResultsData = index => {
if(index==undefined) {
this.setState({resultsData: []})
} else {
let _resultsData = this.state.resultsData;
let _hasCount = this.state.hasCount;
// if(_hasCount == 0) return;
_resultsData.splice(index, 1);
_hasCount = _hasCount - 1;
this.setState({resultsData: _resultsData, hasCount: _hasCount});
}
}
render() {
return (
<div >
<Selected_List {...this.state} />
</div >
)
}
}
render(<Demo />, document.getElementById('content'))