vue+elementui表格中是否启用这一列添加开关按钮
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>
<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-if="colItem.propName == 'status'">
<el-switch>
<!-- 这里写你的开关 -->
</el-switch>
</template>
<template v-else>{{ scope.row[colItem.propName] }}</template>
</template>
</el-table-column>
</template>试试看
<el-table>
<el-table-column
prop="zip"
label="日期"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="click(scope.row)" type="text" size="small">启用</el-button>
</template>
</el-table-column>
</el-table>这样试过么? 写在js里面返回html片段的话 不知道会不会被解析
把组件写到template中的el-table-column的插槽里
不知道和你的情况是否一致 这个是我自己封装的 然后预留的插槽 你看是否能帮到你
把你 tableModule 这个被封装的 文件贴出来 看看 ，你在这个文件里面应该是可以添加插槽，