和box-shadow对比有啥优缺点?
box-shadow不能覆盖在图片上

圆角 outline 的兼容性如何？
Safari对圆角的支持稍差，要16.4

第一步：监听checkbox 的点击事件（选中和取消选中）

 <el-table
 :data="tableData"
 ref="myTable"
 stripe border
 row-key="id"
 :header-cell-style="headerClass"
 :cell-style="cellClass"
 @selection-change="handleSelectionChange"
 >
 <!-- 出现多选模式的selection选择框 只需要加上以下一行就可以 -->
 <el-table-column type="selection" width="50" align="center"></el-table-column>
 <el-table-column label="权限名称" width="160px">
    <template slot-scope="scope">
      <svg-icon icon-class="role2" :style="{ color: scope.row.iconColor ? scope.row.iconColor : '#000000' }"></svg-icon>
      <span>{{ scope.row.roleName }}</span>
    </template>
 </el-table-column>
 <el-table-column label="权限描述" prop="remark" show-overflow-tooltip> </el-table-column>
 </el-table>

第二步：利用el-table提供的方法处理数据

    selectionChange(row) {
      // console.log("🚀 ~ selectionChange ~ row:", row);
      // this.selectionRowList = row;
      // if (row.length > 1) {
      //   // 如果选择超过一个选项，则只保留最后一个选项
      //   row.splice(0, row.length - 1);
      // }
      this.selectionRowList = row;

      if (row.length > 1) {
        this.$refs.myTable.clearSelection();
        this.$refs.myTable.toggleRowSelection(row.pop());
      }
      if (row.length != 0) {
        this.selectProtocolId = row[row.length - 1].id;
      }
    },

解释一下上面的这个函数，
selectionRowList 用来接收选中的行数据，最后需要返回给父元素，
selectProtocolId 用来解决数据回显的问题，第三步会讲到这一步为什么要修改
clearSelection 用来清除所有选中的数据
toggleRowSelection 用来切换某一行的状态，参数是某行的整条数据
这样就能简单的利用多选模式的样式来实现单选

第三步：数据回显

上面两步已经能实现基本功能，这一步解决的是回显的问题。选中数据后，想要再次修改，存在一些小小的坑
item.id去取当前数据的唯一id值就好，注意放置的顺序！！！！！！！

this.tableData.forEach((item,index) => {
    if(item.id == this.selectProtocolId){
        this.$nextTick(() => {
            this.$refs.myTable.toggleRowSelection(item);
        })
    }
})

想要展示选中的数据，首先得与数据源进行比较，tableData是分页拿到的数据。
selectProtocolId的初始值是props中传递过来的一个参数（无法修改props属性的值，只能用一个中间变量来控制），代表上一次保存的数据。往后每次点击切换的时候，都需要动态的更新这个值（第二步中提到的内容），否则就会出现某两页都有数据被选中的情况，因为不改变selectProtocolId的值，总会有某页的某条数据与之匹配
$nextTick确保在DOM更新时切换数据选中状态的代码能正常执行，否则直接执行，无法设置选中状态

第四步：禁用全选功能

::v-deep .el-table__header-wrapper  .el-checkbox{
    //找到表头那一行，然后把里面的复选框隐藏掉
    display:none
}

效果图：

这是因为在当前浏览器打开的时候是在本地存储里面取值,可以直接打开链接,但是换了浏览器过后他在本地没有存储值,这时就无法在本地存储里面获取到对应的值，所以就需要做出修改

如下代码做出修改：

时间格式插件

安转:

npm install moment --save # npm
yarn add moment # Yarn
Install-Package Moment.js # NuGet
spm install moment --save # spm
meteor add momentjs:moment # meteor
bower install moment --save # bower (deprecated)

引用:

import moment from "moment";
import "moment/locale/zh-cn"; // 导入中文语言包

实例使用如下:

html写法:

<el-table-column prop="ecmTime" label="填报时间" :formatter="formatEcmTime" show-overflow-tooltip></el-table-column>

JS写法:

 computed: {
    formatEcmTime() {
      return (row) => {
        const formatted = moment(row.ecmTime).format("YYYY-MM-DD"); // 使用Moment.js格式化日期
        return formatted;
      };
    }
  },

  components: {
    //组件懒加载(用到时才会加载)
    yuMemberHighGrade: () => import("@/views/components/yu-dept-member/yu-member-highGrade.vue")
  },

穿透属性

原饼图

修改代码

series: [
        //数据序列
        {
          name: "我的任务",
          type: "pie",
          radius: "50%",
          data: [
            { value: 735, name: "未完成", itemStyle: { color: "#ffdc60" } },
            { value: 484, name: "已完成", itemStyle: { color: "#ff915a" } }
          ],

          // 去掉折线以及折线提示文字
          label: {
            normal: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },

          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.7)"
            }
          }
        }
      ]

实现饼图

<script>
export default {
  data() {
    return {
      showContent: false,
      dialogVisible: false,
      value: true,
      input: "",
      Password: "",
      inputuser: "",
      isDisabled: true,
      isPasswordVisible: false,

      showFirstImage: 0,
      boldText: false,
      textColor: "black",

      showtoggle: 0,
      toggletext: false,
      texttoggle: "black"
    };
  },
  methods: {
    atclick() {
      this.dialogVisible = true;
    },

    // 随机生成四位数密码
    setPassword() {
      // 生成一个随机的1到9中的四位数
      const randomPassword = Math.floor(Math.random() * 9000) + 1000;

      // 将生成的随机数赋值给v-model绑定的data属性（例如：Password）
      this.Password = randomPassword.toString();
      // this.isPasswordVisible = true;
      this.isPasswordVisible = !this.isPasswordVisible;
    },

    // 创建分享
    CreateShare() {
      this.isDisabled = !this.isDisabled;
    },

    //取消分享
    cancellation() {
      this.isDisabled = true;
    },

    // 系统内分享
    toggleContent() {
      this.showContent = !this.showContent;

      this.showtoggle = this.showtoggle ? 0 : 1;
      this.toggletext = !this.toggletext;
      this.texttoggle = this.showtoggle ? "#1296db" : "black";

      this.showFirstImage = 0;
      this.boldText = false;
      this.textColor = "black";
    },

    // 公开分享
    PublicSharing() {
      this.showContent = false;

      this.showFirstImage = this.showFirstImage ? 0 : 1;
      this.boldText = !this.boldText;
      this.textColor = this.showFirstImage ? "#1296db" : "black";

      this.showtoggle = 0;
      this.toggletext = false;
      this.texttoggle = "black";
      console.log("公开分享");
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.sendsswitch {
  display: flex;
  align-items: center;
}

.imgyuan {
  width: 15px;
  height: 15px;
  margin-right: 8px;
}

.sendsinput {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 25px 0;
}
.btn {
  margin-bottom: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .btnpassword {
    display: flex;
    width: 40%;
    align-items: center;

    .btnSharing {
      cursor: pointer;
      display: flex;
      align-items: center;
    }
  }
  .btnlimitation {
    width: 40%;
    display: flex;
    align-items: center;
    .btnteg {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }
}

.content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .password {
    width: 40%;
  }

  .limitation {
    width: 40%;
  }
}
</style>

弹窗在其他页面使用

<!-- 分享 -->
      <div class="iconBox" @click="lookVissble">
        <svg-icon icon-class="sends" />
      </div>
       <!-- 分享弹框 -->
      <noteSends ref="noteSendsShow" />

//引进组件
import noteSends from "@/views/note-sends.vue";

//注册组件
  components: { noteSends },
//点击打开组件
  methods: {
    lookVissble() {
      this.$refs.noteSendsShow.atclick();
    },
}