Banshee

Banshee 查看完整档案

海外编辑长江职业学院  |  Mechatronics 编辑自由前端人  |  web前端开发cv工程师 编辑 Bashee 编辑
编辑

To die is to die, to live is to suffer
软件:http://www.sharerw.com/

个人动态

Banshee 发布了文章 · 1月15日

vue中父子组件通过props传递数据,父组件数据更新,子组件不动态更新的解决方案

父组件:

  <a-button type="primary" @click="lookInterfaceInfo(record)"
            >查看</a-button
          >
<!-- 查看接口信息弹框 -->
    <look-interface v-if="flag" :interFaceProps="interFaceProps"  >
    </look-interface>
methods: {
    //查看单个接口信息
    lookInterfaceInfo(value) {
      console.log(value, "lookInterfaceInfo");
         this.flag =true;
       this.interFaceProps.modelSwitch =true;
        this.interFaceProps.id= value.id;   
    },
  }

子组件:

export default {
  name: "lookInterface",
  props: ["interFaceProps"],
  components: {},
  data() {
    return {
      data: [],
    };
  },
  created() {},
  watch: {
    "interFaceProps.id": function (newValue, oldValue) {
      console.log(newValue, "newValue");
      console.log(oldValue, "oldValue");
      if (newValue) {
        const url = `/api/interface-api/getApi?id=${newValue}`;
        this.$Ajax.get(url).then((e) => {
          if (e.success) {
            console.log(e.success);
            this.data.push(e.result);
          }
        });
      } else {
        if (this.interFaceProps.id) {
          const url = `/api/interface-api/getApi?id=${this.interFaceProps.id}`;
          this.$Ajax.get(url).then((e) => {
            if (e.success) {
              // console.log(e.success);
              this.data.push(e.result);
            } else {
              this.data = [];
            }
          });
        }
      }
    },
  },
  mounted() {
    console.log(this.interFaceProps.id, "this.interFaceProps.id");
    this.getInterFaceinfo();
  },

 getInterFaceinfo() {
      const url = `/api/interface-api/getApi?id=${this.interFaceProps.id}`;
      this.$Ajax.get(url).then((e) => {
        if (e.success) {
          //console.log(e.success);
          this.data.push(e.result);
        } else {
          this.data = [];
        }
      });
    },

总结:

通过在子组件监听props里面id值变化,最开始启用mounted的方法,后面根据变化的props执行watch里面的方法。

查看原文

赞 0 收藏 0 评论 0

Banshee 回答了问题 · 1月14日

解决vue项目打包后文件导出点击跳转出url出错

前端人员没有及时更新代码导致看不见,我的写法没有问题

关注 2 回答 2

Banshee 回答了问题 · 1月14日

解决请问这个转换为js该怎么写?

换成js写法,在vue里面 mounted() {

this.activeItem=this.getQueryVariable("item");

},🆗了

关注 2 回答 2

Banshee 发布了文章 · 1月12日

使用ant-desgin-vue框架开发

前言:

本人的前端开发历程中,ui框架使用过饿了么,iview,antd-desgin(react),vant,uni-app,之前还一直没有使用过ant-desgin-vue,此框架用的人不知道多不多,反正用起来挺难受。下面简单介绍使用其表格,分页,弹框组件,结合接口实现增删改查最简单的要求。

<template>
  <div class="userSet-warp">
    <!-- 头部 -->
    <div class="head">
      <div class="left-head">
        <div class="input">
          <p>用户名称:</p>
          <a-input v-model="searchvalue"  placeholder="请输入用户名称"  @change="getInputValue"></a-input>
        </div>

        <div class="middule-head">
          <a-button type="primary" @click="gotoSearch"
            >查询</a-button
          >
          <a-button type="primary" @click="reset">重置</a-button>
        </div>
      </div>
      <div class="right-head">
        <a-button type="primary" @click="addUser">新增</a-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table-content">
      <a-table
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="(record) => record.id"
      >
        <a slot="name" slot-scope="text">{{ text }}</a>
        <a slot="sub" slot-scope="text">{{ text }}</a>
        <a slot="createDate" slot-scope="text">{{ text }}</a>
        <a slot="remark" slot-scope="text">{{ text }}</a>

        <span slot="action" slot-scope="text, record">
          <a-button type="primary" @click="fixfunc(record)">修改</a-button
          >&nbsp;&nbsp;
          <a-button type="primary" @click="authority(record)">权限</a-button
          >&nbsp;&nbsp;
          <a-button type="primary" @click="removeInfo(record)">删除</a-button>
        </span>
      </a-table>
    </div>
    <!-- 新增弹框 -->
    <add-user 
    :modelProps="modelProps"
    @refresh="getUserList"
    ></add-user>
    <!-- 修改弹框 -->
    <edit-user
     :editUserProps="editUserProps"
      @refresh="getUserList"
     > </edit-user>
     <!-- 权限弹框 -->
     <!-- <authority-modify
     :authorityProps="authorityProps"
     >
     </authority-modify> -->
       <authority-modify1
     :authorityProps="authorityProps"
     >
     </authority-modify1>
  </div>
</template>
import AddUser from "../components/addUser.vue";
import editUser from "../components/editUser.vue";
import authorityModify from "../components/authorityModify"
import authorityModify1 from "../components/authorityModify1"
export default {
  name: "index",
  components: {
    AddUser,
    editUser,
    authorityModify,
     authorityModify1
  },

  data() {
    return {
       modelProps: {
        modelSwitch: false,
      },
      editUserProps: {
        name: "",
        remark: "",
        modelSwitch: false,
      },
      authorityProps: {
        modelSwitch: false,
      },
      searchvalue: "",
      current: 1,
      selectedRowKeys: [],
      pagination: {
        defaultCurrent: 1, // 默认当前页数
        defaultPageSize: 10, // 默认每页显示数量
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ["10", "20", "30", "40"], // 每页数量选项
        showTotal: (total) => `总共 ${total} 条`, // 显示总数
        
        onShowSizeChange: (defaultCurrent, defaultPageSize) =>
          (this.defaultPageSize = defaultPageSize), //// 改变每页数量时更新显示
      },
      columns: [
        {
          dataIndex: "index",
          key: "序号",
          title: "序号",
          customRender: (text, record, index) =>
            `${
              (this.pagination.defaultCurrent - 1) * this.pagination.defaultPageSize +
              index +
              1
            }`,
        },
        {
          title: "用户名称",
          dataIndex: "name",
          key: "name",
          scopedSlots: { customRender: "name" },
        },
        {
          title: "添加时间",
          dataIndex: "createDate",
          key: "createDate",
          scopedSlots: { customRender: "createDate" },
        },
        {
          title: "用户描述",
          key: "remark",
          dataIndex: "remark",
          scopedSlots: { customRender: "remark" },
        },
        {
          title: "操作",
          key: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
      data: [
      ],
    };
  },
  mounted() {
    this.getUserList();
    this.getUserPagination();
  },
  methods: {
    //权限:
    authority(){
        console.log("权限修改");
        this.authorityProps.modelSwitch = true;
    },
    //删除
    removeInfo(id) {
      const url = "/api/user/delete";
      const ids = [];
      ids.push(id.id);
      console.log(ids, "000");
      // let obj ={};
      // obj = ids;
      this.$Ajax.post(url, {value: ids}).then((e) => {
        if (e.success) {
          console.log("删除成功");
          this.getUserList();
        }
      });
    },
    // 获取input框输入值
    getInputValue(value) {
       console.log(value,'9999');
    },
    //addUser 新增弹框 显示
    addUser() {
      console.log("addUser");
      this.modelProps.modelSwitch = true;
    },
    //分页时间触发的方法
    handleTableChange(pagination) {
      console.log(pagination,'分页信息里面的东西');
      this.pagination.defaultCurrent = pagination.defaultCurrent;
      this.pagination.pageSize = pagination.pageSize;
      // this.queryParam.page = pagination.current;
      // this.queryParam.size = pagination.pageSize;
      this.getUserList();
      this.getUserPagination();
    },
    //重置:
    reset() {
      this.searchvalue = "";
    },
    //查询用户数据
    gotoSearch(searchvalue) {
      console.log(this.searchvalue, "searchvalue值");
      const url = "/api/user/queryPage";
      const getData = {
        name: "name",
        value: this.searchvalue
      };
      if(this.searchvalue==""){
            this.getUserList();
      }else{
          this.$Ajax.post(url,getData).then((e) => {
        if (e.success) {
          console.log(e.result, "success");
          this.data = e.result.list;
          this.pagination.defaultCurrent = e.result.page.pageNo;
          this.pagination.pageSize = e.result.page.pageSize;
        }
      });
      }
        
    },
    // 查询用户设置数据列表
    getUserList() {
      const url1 = "/api/user/queryList"
     // const url = "/api/user/queryPage";
      const getData = {
        name: this.searchvalue,
      };
      // const name = this.searchvalue;
      this.$Ajax.post(url1, getData).then((e) => {
        if (e.success) {
          console.log(e.result, "success");
          this.data = e.result;
          // this.pagination.defaultCurrent = e.result.page.pageNo;
          // this.pagination.pageSize = e.result.page.pageSize;
        }
      });
    },
    // 查询分页
    getUserPagination(){
        const url = "/api/user/queryPage";
          const getData = {
        name: this.searchvalue,
      };
        this.$Ajax.post(url,getData).then((e) => {
        if (e.success) {
          console.log(e.result, "success");
          this.pagination.defaultCurrent = e.result.page.pageNo;
          this.pagination.pageSize = e.result.page.pageSize;
        }
      });
    },
    // 修改
    fixfunc(row) {
        console.log(row, "9999");
        this.editUserProps.modelSwitch = true;
        this.editUserProps.name=row.name;
        this.editUserProps.remark=row.remark;
        this.editUserProps.id=row.id;

    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
  },
};
</script>

效果如图:

image

查看原文

赞 0 收藏 0 评论 0

Banshee 赞了回答 · 2020-12-10

解决js如何提取出包含在网址(路由)中的键值

let afterUrl =  window.location.search.substring(1);//(问号以后的字符串)

let paramsArray = afterUrl.split('&')
let obj = {};
for (let i = 0; i<paramsArray.length; i++) {
    let arr = paramsArray[i].split("=");
    let key = arr[0];
    let value = arr[1];
    obj[key] = value;
}

关注 4 回答 4

Banshee 赞了回答 · 2020-12-07

解决js关于数组合并的问题

解构赋值即可

console.log( Object.values({...list2,...list1}))

关注 4 回答 3

Banshee 关注了专栏 · 2020-11-17

狐七的前端之路

看那夕阳下的奔跑,那是我逝去的青春。

关注 25

Banshee 回答了问题 · 2020-11-16

解决前端工作碰到哪些业务不能做?

什么虚拟货币交易,什么网络金融贷款,什么充值返利平台,这些个都多少在打擦边球,慎重选择,仅仅个人看法。

关注 8 回答 6

Banshee 赞了回答 · 2020-11-02

webpack如何proxy绝对地址的api

webpack再怎么配置也只是用于本地开发请求代理,你部署到线上环境要解决跨域问题只能靠服务端配合解决,比如配置nginx代理,单独前端自己解决不了

关注 2 回答 3

Banshee 赞了回答 · 2020-11-02

图标的问题 急 急 急

少喝两杯省二百找个外包也不至于醉成这样

关注 2 回答 2

认证与成就

  • 获得 19 次点赞
  • 获得 8 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 8 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-07-02
个人主页被 2.4k 人浏览