排序
在需要排序的字段加上sortable 即可。
可在el-table使用:default-sort设置默认排序规则。
取得该条数据
在按钮所在容器加上#default=“空间名”,
按钮本身加上@click=“update(scopexx.$index, scopexx.row)”,
methods里update(index, row){}即可使用。
$index是当前排序下该行数据在数据list里的索引, row是该行数据
<template>
<div class="wrapper">
<el-table
:data="tableData"
stripe
border
:default-sort="{ prop: 'name', order: 'descending' }"
style="width: 100%"
height="250"
>
<el-table-column type="selection" sortable width="55" />
<el-table-column fixed prop="id" label="商品id" width="100" />
<el-table-column
prop="name"
sortable
label="名字"
show-overflow-tooltip
/>
<el-table-column #default="scopexx" fixed="right" label="操作" width="200">
<el-button type="warning" @click="update(scopexx.$index, scopexx.row)"
>编辑</el-button
>
<el-button type="danger" @click="del(scopexx.$index, scopexx.row)"
>删除</el-button
></el-table-column
>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
input: "",
dialogFormVisible: false,
vCount: 0,
currentPage: 1,
};
},
methods: {
update(index, row) {
console.log(index);
console.log(row);
this.setDialogFormVisible2(true);
this.$api.selectOneGood({ id: row.id }).then((res) => {
const data = res.data.data[0];
data.checkList = [];
data.checkedIds = [1, 8, 6];
this.$refs.dialog2.goodsForm = data;
});
},
del(index, row) {
this.$confirm({
title: "确认删除吗?",
okText: "是",
cancelText: "否",
icon: "exclamation-circle",
})
.then(() => {
this.$api.delGood({ id: row.id }).then((res) => {
this.$message({ message: "删除成功", type: "info" });
this.search1();
});
})
.catch(() => {
this.$message({ message: "取消删除", type: "error" });
});
},
},
};
</script>