尼古拉斯_东

尼古拉斯_东 查看完整档案

上海编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

低调,猥琐发育。

个人动态

尼古拉斯_东 赞了回答 · 9月11日

js删除数组对象中指定元素的对象

//要删除pk这个属性
//尽量不修改原来对象
let arr = [
    {
        pk:'1',
        name:'张',
        age:'13'
    },
    {
        pk:'2',
        name:'张',
        age:'23'
    },
    {
        pk:'3',
        name:'张',
        age:'33'
    }
    ];
let _new_arr_ = arr.map((item)=>{
    return Object.keys(item).reduce((obj,key)=>{
        if(key==='pk') return obj;
        obj[key] = item[key];
        return obj;
    },{});
});

console.log(_new_arr_);

关注 5 回答 4

尼古拉斯_东 回答了问题 · 9月5日

element 点击行 在当前行出现文字

为什么不hover呢?点击的话你参考下面代码:

<template>
    <div id="app">
        <el-table :data="tableData" style="width: 100%" @row-click="rowClick">
            <el-table-column label="日期" width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
            </el-table-column>
            <el-table-column label="姓名" width="180">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini">编辑</el-button>
                    <el-button size="mini" type="danger">删除</el-button>
                    <div v-show="showBtn == scope.row.id" style="display: inline-block;margin-left: 20px;">
                        <el-button size="mini" type="primary" icon="el-icon-edit" circle></el-button>
                        <el-button size="mini" type="success" icon="el-icon-check" circle></el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete" circle></el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    name: "app",
    data() {
        return {
            showBtn: -1,
            tableData: [{
                    id: 1,
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    id: 2,
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1517 弄"
                },
                {
                    id: 3,
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1519 弄"
                },
                {
                    id: 4,
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1516 弄"
                }
            ]
        };
    },
    methods: {
        rowClick(row, column, event) {
            this.showBtn = row.id;
        }
    }
};
</script>

关注 2 回答 1

尼古拉斯_东 收藏了问题 · 9月5日

element中如何给table中悬停行时添加提示文字?

比如说,鼠标移动到其中一行,该行上边显示双击打开详细内容。这该怎么做呢?

尼古拉斯_东 回答了问题 · 9月5日

element中如何给table中悬停行时添加提示文字?

通过cell-mouse-enter和cell-mouse-leave实现,参考下:

<template>
  <div id="app">
    <el-table :data="tableData" style="width: 100%" @cell-mouse-enter="enter" @cell-mouse-leave="leave">
      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top" :ref="'popover' + scope.row.id" >
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  name: "app",
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    enter(row, column, cell) {
      console.log(row)
      this.$refs['popover'+row.id].showPopper = true
    },
    leave(row,column,cell) {
      this.$refs['popover'+row.id].showPopper = false
    }
  }
};
</script>

上面代码引自:
https://segmentfault.com/q/1010000023275466?sort=created

关注 2 回答 1

尼古拉斯_东 回答了问题 · 9月5日

vue+element Checkbox 多选框 修改时动态渲染已勾选数据,但之后点击无法勾选?

createTimerModel定义的时候,要这样写:

createTimerModel: {
    repeatFlag: '',
    repeatWeeks: []
}

el-checkbox-group的v-model绑定一个数组,必须在data中初始化定义,不然你点击复选框的时候,不能选中...

关注 2 回答 2

尼古拉斯_东 回答了问题 · 9月4日

解决echarts图中不要描边 应该修改哪一个属性

Q1:修改哪个属性?
textBorderColor是设置字体描边颜色的
Q2:是自带的效果?
是,因为字体默认是白色,你的背景又是白色,不给你加个黑色描边,label文字不就看不见了吗?


可以改,你label的color设置个其他颜色,不要默认白色

关注 2 回答 1

尼古拉斯_东 收藏了问题 · 9月4日

eslint 如何配置只扫描当前改动文件

nuxt的脚手架每次改动文件都会整个目录扫描编译,很慢,能不能配置处理成只扫描当前改动文件?

.eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  extends: [
    '@nuxtjs',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended',
  ],
  plugins: ['prettier', 'vue'],
  rules: {
    'no-console': 0,
    'vue/name-property-casing': 0,
    indent: ['off', 2],
    'handle-callback-err': 0,
  },
}

尼古拉斯_东 赞了回答 · 9月3日

如何让setTimeout顺次执行?

别想改题
我先把你的题目贴一遍
image.png
题目修改正确后我来运行
image.png
没啥毛病 所以你的问题不是问题

关注 5 回答 5

认证与成就

  • 获得 28 次点赞
  • 获得 6 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 5 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 6月22日
个人主页被 477 人浏览