Jst UI

# List 列表

样式多元化的列表组件

# 单选List

单选展示的List

first mid
1256
first mid last
3321
db1112222333
100064.6
test14
440
test13
65670
test12
53450
test11
3520
A2
3210
xxx8
43870
xx
9870
tt
3459 
<j-list class="small" type="radio" style="height:300px;">
    <j-list-item v-model="funderId" :value="ele.id" v-for="(ele,i) in dt_list">
        <div style="margin-bottom:5px">{{ele.name}}</div>
        <j-tag class="amount" v-if="ele.amount>0">{{ele.amount}}</j-tag>
    </j-list-item>
</j-list>
<script>
  export default {
    data() {
      return {
        dt_list:[
          {"id":"cc-2543331","name":"first mid","amount":1256.0},
          {"id":"cc-2537467","name":"first mid last ","amount":3321.0},
          {"id":"cc-2511511","name":"db1112222333","amount":100064.60},
          {"id":"cc-2537452","name":"test14","amount":440.0},
          {"id":"cc-2537451","name":"test13","amount":65670.0},
          {"id":"cc-2537449","name":"test12","amount":53450.0},
          {"id":"cc-2537448","name":"test11","amount":3520.0},
          {"id":"cc-2537363","name":"A2","amount":3210.0},
          {"id":"cc-2537358","name":"xxx8","amount":43870.0},
          {"id":"cc-2537356","name":"xx","amount":9870.0},
          {"id":"cc-2537355","name":"tt","amount":3459.0}
        ],
        funderId:''
      }
    },
    methods: {
     
    }
  };
</script>
显示代码 复制代码

# 多选List

多选展示的List

first mid
1256
first mid last
3321
db1112222333
100064.6
test14
440
test13
65670
test12
53450
test11
3520
A2
3210
xxx8
43870
xx
9870
tt
3459 
<j-list class="small" type="checkbox" style="height:300px;">
    <j-list-item v-model="funderId" :value="ele.id"  v-for="(ele,i) in dt_list" >
        <div style="margin-bottom:5px">{{ele.name}}</div>
        <j-tag class="amount" v-if="ele.amount>0">{{ele.amount}}</j-tag>
    </j-list-item>
</j-list>
<script>
  export default {
    data() {
      return {
        dt_list:[
          {"id":"cc-2543331","name":"first mid","amount":1256.0},
          {"id":"cc-2537467","name":"first mid last ","amount":3321.0},
          {"id":"cc-2511511","name":"db1112222333","amount":100064.60},
          {"id":"cc-2537452","name":"test14","amount":440.0},
          {"id":"cc-2537451","name":"test13","amount":65670.0},
          {"id":"cc-2537449","name":"test12","amount":53450.0},
          {"id":"cc-2537448","name":"test11","amount":3520.0},
          {"id":"cc-2537363","name":"A2","amount":3210.0},
          {"id":"cc-2537358","name":"xxx8","amount":43870.0},
          {"id":"cc-2537356","name":"xx","amount":9870.0},
          {"id":"cc-2537355","name":"tt","amount":3459.0}
        ],
        funderId:[]
      }
    },
    methods: {
     
    }
  };
</script>
显示代码 复制代码

# 禁用项

first mid
1256
first mid last
3321
db1112222333
100064.6
test14
440
test13
65670
test12
53450
test11
3520
A2
3210
xxx8
43870
xx
9870
tt
3459 
<j-list class="small" type="checkbox" style="height:300px;" >
    <j-list-item v-model="funderId" :value="ele.id" :disabled="i % 3 == 0"  v-for="(ele,i) in dt_list" >
        <div style="margin-bottom:5px">{{ele.name}}</div>
        <j-tag class="amount" v-if="ele.amount>0">{{ele.amount}}</j-tag>
    </j-list-item>
</j-list>
<script>
  export default {
    data() {
      return {
        dt_list:[
          {"id":"cc-2543331","name":"first mid","amount":1256.0},
          {"id":"cc-2537467","name":"first mid last ","amount":3321.0},
          {"id":"cc-2511511","name":"db1112222333","amount":100064.60},
          {"id":"cc-2537452","name":"test14","amount":440.0},
          {"id":"cc-2537451","name":"test13","amount":65670.0},
          {"id":"cc-2537449","name":"test12","amount":53450.0},
          {"id":"cc-2537448","name":"test11","amount":3520.0},
          {"id":"cc-2537363","name":"A2","amount":3210.0},
          {"id":"cc-2537358","name":"xxx8","amount":43870.0},
          {"id":"cc-2537356","name":"xx","amount":9870.0},
          {"id":"cc-2537355","name":"tt","amount":3459.0}
        ],
        funderId:[]
      }
    },
    methods: {
     
    }
  };
</script>
显示代码 复制代码

# 开关模式的List

Item包含开关按钮的List组件

支持普通快递
支持普通快递发货
支持COD(货到付款)
支持货到付款业务,先发货,由快递公司代收款

可通过grid设置Item一行展示多少个，他接受一个Number类型的参数；通过justify设置内容水平居中位置;

<j-list type="enabled" style="padding-bottom:0px;">
    <j-list-item v-model="isGeneral" disabled @change="saveFreightConfig('general')">
        支持普通快递
        <j-remark-label>支持普通快递发货</j-remark-label>
    </j-list-item>
    <j-list-item v-model="isCod" @change="saveFreightConfig('cod')">
        支持COD(货到付款)
        <j-remark-label>支持货到付款业务,先发货,由快递公司代收款</j-remark-label>
    </j-list-item>
</j-list>
<script>
  export default {
    data() {
      return {
        isGeneral:true,
        isCod:false
      }
    },
    methods: {
      saveFreightConfig(data){
        console.log(data,this.isCod);
      }
    }
  };
</script>
显示代码 复制代码

# 可搜索

first mid
1256
first mid last
3321
db1112222333
100064.6
test14
440
test13
65670
test12
53450
test11
3520
A2
3210
xxx8
43870
xx
9870
tt
3459

可通过add-search传递字符串true来打开List搜索功能;当List展示项超过20条会自动启用搜索功能，若有关闭请设置add-search为true或auto外的值；

<j-list class="small" type="checkbox" style="height:300px;" add-search="true">
    <j-list-item v-model="funderId" :value="ele.id"  v-for="(ele,i) in dt_list" >
        <div style="margin-bottom:5px">{{ele.name}}</div>
        <j-tag class="amount" v-if="ele.amount>0">{{ele.amount}}</j-tag>
    </j-list-item>
</j-list>
<script>
  export default {
    data() {
      return {
        dt_list:[
          {"id":"cc-2543331","name":"first mid","amount":1256.0},
          {"id":"cc-2537467","name":"first mid last ","amount":3321.0},
          {"id":"cc-2511511","name":"db1112222333","amount":100064.60},
          {"id":"cc-2537452","name":"test14","amount":440.0},
          {"id":"cc-2537451","name":"test13","amount":65670.0},
          {"id":"cc-2537449","name":"test12","amount":53450.0},
          {"id":"cc-2537448","name":"test11","amount":3520.0},
          {"id":"cc-2537363","name":"A2","amount":3210.0},
          {"id":"cc-2537358","name":"xxx8","amount":43870.0},
          {"id":"cc-2537356","name":"xx","amount":9870.0},
          {"id":"cc-2537355","name":"tt","amount":3459.0}
        ],
        funderId:[]
      }
    },
    methods: {
     
    }
  };
</script>
显示代码 复制代码

# 控制Item行个数

Item 固定多少个一行，该示例还举例了grid的用法

first mid
1256
first mid last
3321
db1112222333
100064.6
test14
440
test13
65670
test12
53450
test11
3520
A2
3210
xxx8
43870
xx
9870
tt
3459

可通过grid设置Item一行展示多少个，他接受一个Number类型的参数；通过justify设置内容水平居中位置;

<j-list class="small" type="radio" :grid="5" justify="center" style="height:240px;">
    <j-list-item v-model="funderId" :value="ele.id"  v-for="(ele,i) in dt_list">
        <div style="margin-bottom:5px">{{ele.name}}</div>
        <j-tag class="amount" v-if="ele.amount>0">{{ele.amount}}</j-tag>
    </j-list-item>
</j-list>
<script>
  export default {
    data() {
      return {
        dt_list:[
          {"id":"cc-2543331","name":"first mid","amount":1256.0},
          {"id":"cc-2537467","name":"first mid last ","amount":3321.0},
          {"id":"cc-2511511","name":"db1112222333","amount":100064.60},
          {"id":"cc-2537452","name":"test14","amount":440.0},
          {"id":"cc-2537451","name":"test13","amount":65670.0},
          {"id":"cc-2537449","name":"test12","amount":53450.0},
          {"id":"cc-2537448","name":"test11","amount":3520.0},
          {"id":"cc-2537363","name":"A2","amount":3210.0},
          {"id":"cc-2537358","name":"xxx8","amount":43870.0},
          {"id":"cc-2537356","name":"xx","amount":9870.0},
          {"id":"cc-2537355","name":"tt","amount":3459.0}
        ],
        funderId:''
      }
    },
    methods: {
     
    }
  };
</script>
显示代码 复制代码

# List Attributes

参数 说明 类型 可选值 默认值
type List 组件类型 String radio,checkbox,enabled radio
grid List-item 一行展示个数 Number - —
justify 水平居中方式 string center —
add-search 可搜索 String true，auto(等其他字符串)关闭搜索 auto

# List-item Attributes

参数 说明 类型 可选值 默认值
disabled List-item是否可选 Boolean - false

# List Events

事件名 说明 参数
change List-item 选中项变更时触发 选中Item的值

← Iframe 页面 →