letter-sort 字母排序

筛选数据

基础用法

请选择店铺

使用list、attr属性, 外层容器设置高度，v-if 这里为了避免数据还未获取到就渲染的问题，v-model 返回的是对象形式，具体场景可分别使用

<j-input v-model="sortres" @click="showLetterSort" placeholder="请选择店铺">
  <i slot="suffix" class="icon-close" @click.stop="clearValue"></i>
</j-input>
<j-dialog
  ref="lettersortDialog"
  title="请选择店铺"
  position="center"
  footer-border-top
  style="width:600px;height:420px;"
>
  <div slot="body">
    <j-letter-sort
      v-if="letterSortArr.length>0"
      ref="lettersortRef"
      :list="letterSortArr"
      attr="name"
      inputtype="checkbox"
      @confirm="confirmLetter"
    />
  </div>
</j-dialog>
<script>
export default {
  data(){
    return{
      sortres: '',
      letterSortArr: [
        {
          'code': 10361447,
          'name': 'Mercado芜菁测试店铺'
        },
        {
          'code': 100000002,
          'name': 'Line测试店铺'
        },
        {
          'code': 10361736,
          'name': 'JdTh芜菁测试店铺'
        },
        {
          'code': 10395714,
          'name': 'TikTok芜菁20230323'
        },
        {
          'code': 10158705,
          'name': '111qqwe'
        },
        {
          'code': 10194191,
          'name': '112'
        },
        {
          'code': 10395448,
          'name': 'live shop 再来一次公司'
        },
        {
          'code': 10395449,
          'name': 'live shop 芜菁测试20230320'
        },
        {
          'code': 10194470,
          'name': 'MiniShop店铺'
        },
        {
          'code': 10161043,
          'name': 'PurchaseOrderShop'
        },
        {
          'code': 10165982,
          'name': '同步测试12'
        },
        {
          'code': 10352721,
          'name': 'Tokopedia芜菁测试店铺'
        },
        {
          'code': 475432,
          'name': 'jstyikantest'
        },
        {
          'code': 10361628,
          'name': 'TikTok芜菁测试店铺11'
        },
        {
          'code': 10159418,
          'name': '1111-123'
        },
        {
          'code': 10355611,
          'name': 'Akulaku芜菁测试店铺'
        },
        {
          'code': 10160935,
          'name': 'test offline'
        },
        {
          'code': 91000116,
          'name': '技术支持21'
        },
        {
          'code': 10194502,
          'name': '阿翔的店'
        },
        {
          'code': 10355614,
          'name': 'Shopify芜菁测试店铺'
        },
        {
          'code': 10194503,
          'name': 'minishop测试店铺1'
        },
        {
          'code': 10355615,
          'name': 'Tiki芜菁测试店铺'
        },
        {
          'code': 10194504,
          'name': 'minishop测试店铺2'
        },
        {
          'code': 10395347,
          'name': '一号'
        },
        {
          'code': 10396056,
          'name': 'TikTok测试测'
        },
        {
          'code': 10209188,
          'name': 'shopeetest－es'
        },
        {
          'code': 10209189,
          'name': 'lazadatest－1221'
        },
        {
          'code': 91000145,
          'name': '龙顶批发开单单元测试'
        },
        {
          'code': 10209190,
          'name': 'shopify－test001'
        },
        {
          'code': 10161651,
          'name': '0909test'
        },
        {
          'code': 10209191,
          'name': 'hailiu测试店(ID站)铺'
        },
        {
          'code': 10161652,
          'name': '0909test1'
        },
        {
          'code': 91000010,
          'name': '龙顶旗舰店'
        },
        {
          'code': 10355650,
          'name': 'ThisShop芜菁测试店铺'
        },
        {
          'code': 10161387,
          'name': '0817_lazada'
        },
        {
          'code': 10361414,
          'name': 'TikTok芜菁测试222'
        },
        {
          'code': 10190721,
          'name': '风条测试店铺00001'
        },
        {
          'code': 10159348,
          'name': '广州12323113123123123'
        },
        {
          'code': 10160857,
          'name': 'test0713'
        },
        {
          'code': 10160858,
          'name': '0713test'
        },
        {
          'code': 10161410,
          'name': '08177_lazada'
        },
        {
          'code': 10160322,
          'name': '测试线下店铺2'
        },
        {
          'code': 10206767,
          'name': 'xiapi22'
        }
      ],
    }
  },
  methods:{
    showLetterSort()
    {
      this.$refs.lettersortDialog.show();
    },
    clearValue()
    {
      this.sortres = '';
      this.$refs.lettersortRef.clearChecked();
    },
    confirmLetter(val)
    {
      if (val)
      {
        if (this.$refs.lettersortRef.inputtype !== 'radio')
        {
          const r = [];
          this.result.map(i =>
          {
            r.push(i.name);
            this.sortres = r.join(',');
          });
        }
        else
        {
          this.sortres = this.result.name;
        }
        this.$refs.lettersortDialog.hide();
      }
    },
  }
}
</script>

显示代码 复制代码 复制代码

Attributes

参数	说明	类型	可选值	默认值
list	传入的数据	Array	-	—
attr	按照某属性排序	string	-	—
inputtype	多选/单选	string	checkbox/radio	radio
is-show-input	是否显示筛选框	boolean	—	true

Events

事件名称	说明	回调参数
confirm	确定选项	val:返回选中结果

Methods

方法名称	说明	回调参数
clearChecked	清空组件内radio/checkbox的选中状态	-