vue element-ui 批量删除、属性中字符串拼接

批量删除

html

批量按钮

<el-form-item>
      <el-popconfirm title="确定删除这些吗?"
                     confirm-button-text='确定'
                     cancel-button-text='取消'
                     @confirm="delHandle(null)"
      >
        <template #reference>
          <el-button type="danger" :disabled="this.multipleSelection.length === 0">批量删除
          </el-button>
        </template>
      </el-popconfirm>
    </el-form-item>

Table【Vue3】

 <el-table-column
        width="150"
        label="操作">
      <template #default="scope">
        <el-button type="text" @click="dailyDetailsHandle(scope.row)">详情</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button type="text" @click="editHandle(scope.row)">编辑</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-popconfirm title="确定删除这个吗?"
                       confirm-button-text='好的'
                       cancel-button-text='不用了'
                       @confirm="delHandle(scope.row.id)"
        >
          <template #reference>
            <el-button type="text">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>

Table【Vue2】

<el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm <el-popconfirm :title="`确认删除【${scope.row.departmentName}】？`"
                         confirm-button-text="好的"
                         cancel-button-text="不用了"
                         @confirm="delHandle(scope.row.id)"
                         @onConfirm="delHandle(scope.row.id)"
          >
            <el-button type="danger" slot="reference">删除</el-button>
          </el-popconfirm>
                       confirm-button-text='好的'
                       cancel-button-text='不用了'
                       @confirm="delHandle(scope.row.id)"
                       @onConfirm="delHandle(scope.row.id)"
        >
            <el-button type="danger" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>

js

属性

data() {
    return {
      multipleSelection: []
      	}
      }

方法

handleSelectionChange(val) {
      this.multipleSelection = val;
    },
delHandle(id) {
      let ids = []
      if (id) {
        ids.push(id)
      } else {
        this.multipleSelection.forEach(e => {
          ids.push(e.id)
        })
      }
      this.axios.post('/sys/role/del', ids).then(res => {
        this.$message({
          showClose: true,
          message: res.data.msg,
          type: 'success',
          duration: 1000,
          onClose: () => {
            this.getRoleList()
          }
        })
      })
    }

Vue标签属性字符串拼接

:title="`确认删除【${scope.row.departmentName}】？`"