element-ui 相关组件遇到的问题

1.解决el-raido选不中的问题

onSelectChange() {
      this.$forceUpdate();
    }

2.el-tree复选框选中选中的id值

//前提条件node-key="id"

<el-tree :data="list"  :props="defaultProps" show-checkbox  node-key="id" ref="tree" :highlight-current="true" @check="check" @node-click="handleNodeClick"></el-tree>

//获取ids值
let res = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())

3.el-tree编辑复选框回显问题

//default-checked-keys 通过这个设置回显
<el-tree :data="list"  :props="defaultProps" :default-checked-keys="defaultChecks"    default-expand-all  show-checkbox  node-key="id" ref="tree" :highlight-current="true" @check="check" @node-click="handleNodeClick"></el-tree>

//defaultChecks:[]
//举例:defaultChecks[29,32]  这里面的29和32是node-key的值

4.el-dialog 弹出框在关闭后再打开rules验证的错误显示问题，加了一个v-if解决

<el-dialog
      :title="optitle"
      :visible.sync="showDetail"
      width="550px"
      center
      class="addBox"
      v-if="showDetail"
    >

5.el-table 显示树型数据,加tree-props=“{children:‘children’,hasChildren:‘hasChildren’}”

<el-table :data="tableData" style="width: 100%" v-loading="loading" tree-props="{children:'children',hasChildren:'hasChildren'}" row-key="rid">

6.elementui刷新页面

this.$router.go(0)   //方式一
window.location.reload() //方式二

7.el-table 复选框批量选中

<el-table :data="tableData" ref="backageTable" style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
//selection-change="handleSelectionChange"  这个选中和取消选中事件在method里面写 很重要
<el-table-column
        type="selection"
        width="55">
</el-table-column>
//type="selection" 这个类型这样写就可以
</el-table>

handleSelectionChange (val) {
      console.log(val)
},

this.$refs.backageTable.clearSelection()  //这个是清除所有的复选框选中状态 backageTable在el-table里面自己定义

8.el-table 后端删除前端默认删除一行不刷新页面

deldata(row) {
      let that = this
      this.detail.uid = row.uid;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.axios
          .post(`/api/user/delete`, this.detail)
          .then((res) => {
            if (res.data.code == 0) {
              this.tableData.splice(row.index, 1)
              this.$message.success('成功删除数据！');
              // this.$router.go(0)
            } else {
              this.$message.error('删除数据失败，请查看该节点下是否有子节点');
            }
          })
          .catch((err) => {
            this.$message({
              message: err.response.data.message,
              type: "info",
            });
          });
        // this.$message({
        //   type: 'success',
        //   message: '删除成功!'
        // });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

this.tableData.splice(row.index, 1) 重要的是这一行 tableData是el -table的data

9.el-table 列表显示状态的switch按钮

<el-table-column prop="status" label="状态" align="left">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#409eff"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
            @change="changeStatus(scope.row)"
          ></el-switch>
        </template>
</el-table-column>



changeStatus(value){
      let rid = value.rid;
      let status = value.status;

      this.axios
        .post(`/api/route/changeStatus`, {rid:rid,status:status})
        .then((res) => {
          if (res.data.code == 0) {
            this.$message.success('成功修改状态！');
            // this.tableData.splice(row.index, 1);
          } else {
            this.$message.error('状态修改失败！');
          }
        })
        .catch((err) => {
          this.$message({
            message: err.response.data.message,
            type: "info",
          });
        });

    },

10.el-table 列表显示排序的计数器

<el-table-column
        prop="sort"
        label="排序"
        align="left"
        min-width="130px"
      >

        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.sort"
            size="small"
            :min="0"
            @change="handleCareOrderItemNumChange(scope.row)"
          />
        </template>
 </el-table-column>



handleCareOrderItemNumChange(value){
      let rid = value.rid;
      let sort = value.sort;

      this.axios
        .post(`/api/route/changeSort`, {rid:rid,sort:sort})
        .then((res) => {
          if (res.data.code == 0) {
            this.$message.success('成功修改排序！');
            // this.tableData.splice(row.index, 1);
          } else {
            this.$message.error('排序修改失败！');
          }
        })
        .catch((err) => {
          this.$message({
            message: err.response.data.message,
            type: "info",
          });
        });
    },