列表排序:el-select触发@change

1、在Mapper文件中使用注解:
对数据表classify按照字段name进行升序排序(注:name为中文汉字名称)

@Select("SELECT * FROM classify ORDER BY CONVERT(name USING gbk)ASC ")

列表排序:el-select触发@change_第1张图片
2、前端选择器代码(vue前端框架+element插件):

			<el-select
                v-model="value"
                filterable
                placeholder="请选择"
                @change="option_classify(value)"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                el-option>
              el-select>

数据:

data() {
    return {
      classify_List: [],
      //   排序
      options: [
        {
          value: 1,
          label: "按名称升序",
        },
        {
          value: 2,
          label: "按名称降序",
        },
      ],
    };
  },

指@change="option_classify(value)"中的方法:

    option_classify(id) {
      console.log("排序");
      let self = this;
      if (id === 1) {
        this.$http({
          method: "get",
          url: "/classify/find/asc",
        }).then((res) => {
          if (res.data.code === 200) {
            self.classify_List = res.data.data;
          }
        });
      } else {
        this.$http({
          method: "get",
          url: "/classify/find/desc",
        }).then((res) => {
          if (res.data.code === 200) {
            self.classify_List = res.data.data;
          }
        });
      }
    },

效果图:
列表排序:el-select触发@change_第2张图片
列表排序:el-select触发@change_第3张图片

你可能感兴趣的:(前端,javascript,开发语言)