elementUI表格中这样写switch表格是否没有任何作用?效果图
封装的表格代码
<template>
<div>
<!-- 表格 -->
<el-table :data="tableData" ref="tableRef" @selection-change="handleSelectionChange" border>
<!-- 复选框 -->
<el-table-column v-if="isCheckbox" type="selection" align="center" fixed="left" width="60"></el-table-column>
<!-- 序号 -->
<el-table-column v-if="isIndex" type="index" label="序号" align="center" width="60">
<template slot-scope="scope"><span>{{ scope.row.typeIndex }}</span></template>
</el-table-column>
<!-- 表格数据 -->
<template v-for="(colItem, colIndex) in cols">
<el-table-column :align="colItem.align ? colItem.align :'center'" :prop="colItem.propName"
:label="colItem.label" :width="colItem.width" show-overflow-tooltip :key="colIndex">
<template slot-scope="scope">
<img width="36px" height="36px" :src="scope.row.imageUrl" v-if="colItem.propName == 'imageUrl'" />
<template v-else-if="colItem.propName == 'imageList'">
<img width="36px" height="36px" :src="img.path" v-for="(img,imgIndex) in scope.row.imageList" :key="imgIndex" />
</template>
<template v-else-if="colItem.propName == 'imageData'">
<div class="tdCenter">
<img v-show="scope.row.imageData.images && scope.row.imageData.images.length > 0" width="36px" height="36px" :src="img.path" v-for="(img,imgIndex) in scope.row.imageData.images" :key="imgIndex" />
<span v-show="scope.row.imageData.title">{{ scope.row.imageData.title }}</span>
</div>
</template>
<template v-else>{{ scope.row[colItem.propName] }}</template>
</template>
</el-table-column>
</template>
<!-- 操作栏 -->
<el-table-column label="操作" align="center" fixed="right" width="220" :resizable="false">
<template slot-scope="scope">
<div class="comtable-operator-content">
<template v-for="val in handleData">
<el-button size="small" type="general" plain @click="handleFunc(scope, val)" :key="val"
v-if="val == 'edit'">编辑</el-button>
<el-button size="small" type="primary" plain @click="handleFunc(scope, val)" :key="val"
v-if="val == 'check'">查看</el-button>
<el-button size="small" type="danger" plain @click="handleFunc(scope, val)" :key="val"
v-if="val == 'delete'">删除</el-button>
</template>
</div>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total"
:page-size="pageSize" :current-page="page" layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
page: 1,
pageSize: 10
};
},
props: {
// 是否存在复选框
isCheckbox: {
type: Boolean,
default: true
},
// 是否存在序号列
isIndex: {
type: Boolean,
default: true
},
// 列表数据
tableData: {
type: Array,
default () {
return [];
}
},
// 列数据
cols: {
type: Array,
default () {
return [];
}
},
// 操作栏数据
handleData: {
type: Array,
default () {
return ['check', 'delete'];
}
},
// 表格数据总条数
total: {
type: [Number, String],
default: 0
},
// 表格当前页数
pageNumber: {
type: [Number, String],
default: 1
}
},
methods: {
// 表格操作事件
handleFunc(event, buttonType) {
event.buttonType = buttonType;
this.$emit("handleFunc", event);
},
// 当前页显示条目个数改变事件
handleSizeChange(val) {
this.page = 1;
this.pageSize = val;
this.$emit('getList', {
limit: val,
page: 1
})
},
// 当前页数改变事件
handleCurrentChange(val) {
this.page = val;
this.$emit('getList', {
page: val
})
},
// 勾选复选框事件
handleSelectionChange(val) {
this.$emit("handleSelectionChange", val);
},
// 清除所有复选框
handleClear() {
this.$refs.tableRef.clearSelection();
}
},
watch: {
tableData(newVal) {
this.tableData = newVal;
if (this.tableData.length > 0) {
this.tableData.forEach((item, index) => {
item['typeIndex'] = Number(index + (this.page - 1) * this.pageSize + 1);
})
}
this.$forceUpdate();
},
total(newVal) {
this.total = Number(newVal);
},
pageNumber(newVal) {
this.page = Number(newVal);
}
}
};
</script>
<style></style>