vue3+element-plus的el-table的一些操作【个人学习使用】

一、Vue3的slot-socpe的使用方式

在vue3中,不在使用slot-scope的方式进行插槽的使用

使用方式为 #titile = 'scope'进行使用 

     
          
        

在Vue3中的使用样式

二、Vue3+element-plus的编辑/删除功能在el-table上的使用

      

2.1删除/编辑与保存的功能

编辑与保存的功能采用的是三目运算符

2.1.1对应的函数功能

    // 编辑
    const handleDelete = (val1, val2) => {
      val2.isEdit = !val2.isEdit;
      console.log(val1, val2.isEdit);
    };
    // 删除=>连接数据库,数据库的记录清除
    const handleEdit = (val1) => {
      tableData.splice(val1, 1);
    };

    // handleSelectionChange
    const handleSelectionChange = (val) => {
      multipleSelectionData = val;
    };

    // 批量删除
    const multipleDelete = () => {
      multipleSelectionData.forEach((value) => {
        tableData.forEach((val, i) => {
          if (value.date === val.date) {
            tableData.splice(i, 1);
          }
        });
      });
      console.log(multipleSelectionData);
    };

获取el-table的对应的index,并进行删除

你可能感兴趣的:(学习,vue.js,elementui)