javascript
复制代码
<template>
<div>
<!--
showHeader:是否显示头部
size:表格的大小
height:表格的高度
isStripe:表格是否为斑马纹类型
tableData:表格数据源
isBorder:是否表格边框
handleSelectionChange:行选中，多选内容发生变化回调函数
fit:列的宽度是否自己撑开
isRowBgc:如果需要设定行背景，需要指定rowClassName
rowClassName:{
bgc:"pink", //背景颜色
attrName:"xs", //需要根据是否背景的属性
},
isMutiSelect:是否需要多选
isRadio:是否单选
isCondition:表头是否有赛选条件框
-->
<el-table
:show-header="table.showHeader"
:size="table.size"
:height="table.height"
:stripe="table.isStripe"
:data="table.tableData"
:border="table.isBorder"
:row-key="getRowKeys"
@sort-change="handleSort"
@select="handleSelect"
@select-all="handleSelectAll"
@selection-change="handleSelectionChange"
style="width: 100%"
highlight-current-row
:row-style="table.isRowBgc?tableRowClassName:{}"
>
<el-table-column v-if="table.isRadio" align="center" width="55" label="选择">
<template slot-scope="scope">
<!-- 可以手动的修改label的值，从而控制选择哪一项 -->
<el-radio @input="singleElection(scope.row)" class="radio" v-model="templateSelection" :label="scope.row.id"> </el-radio>
</template>
</el-table-column>
<el-table-column
v-if="table.isMutiSelect"
type="selection"
style="width: 60px"
>
</el-table-column>
<template v-for="(col, key) in table.columns">
<el-table-column
v-if="col.type === 'slot'"
:key="key"
:prop="col.prop"
:label="col.label"
:width="col.width"
:align="col.align"
:header-align="col.headerAlign"
>
<template slot-scope="scope">
<slot :name="col.slot_name" :row="scope.row"></slot>
</template>
<el-table-column :align="col.align" v-if="col.isCondition" :label="col.label" :prop="col.prop">
<template
slot="header"
slot-scope="/* eslint-disable vue/no-unused-vars */ scope"
>
<slot :name="col.slot_siff_name"></slot>
</template>
</el-table-column>
</el-table-column>
<el-table-column
v-else
:key="key"
:fixed="col.isFixed"
v-show="col.hide"
:prop="col.prop"
:label="col.label"
:width="col.width"
:align="col.align"
:header-align="col.headerAlign"
>
<el-table-column v-if="col.isCondition" :align="col.align" :label="col.label" :prop="col.prop">
<template
slot="header"
slot-scope="/* eslint-disable vue/no-unused-vars */ scope"
>
<slot :name="col.slot_siff_name"></slot>
</template>
</el-table-column>
</el-table-column>
</template>
</el-table>
</div>
</template>
<script>
export default {
name: "hsk-table",
props: {
data: Object,
},
data() {
return {
templateSelection: "", //当前选择行的id
checkList: [],// 当前选择的行的数据
table: {
showHeader:true, //是否显示表头
fit:"true", //列的宽度是否自动撑开
size:"small", //表格大小类型 medium / small / mini
height:"500", //高度
isRowBgc:true, //是否开启根据行某个属性更改背景
rowClassName: null, //行背景及其根据哪一个属性进行判断是否背景
columns: [], //列数据
tableData: [], //表数据
isMutiSelect: false, //是否行多选
isRadio:false, //是否单选
isBorder: true, //是否边框
isStripe: false, //是否斑马纹
},
};
},
watch: {
data: {
handler(newVal) {
this.init(newVal);
},
immediate: true,
deep: true,
},
},
methods: {
tableRowClassName(e) {
if(e.row[this.table.rowClassName.attrName]){
return {
background:this.table.rowClassName.bgc
}
}else{
return {}
}
},
async init(val) {
for (let key in val) {
if (Object.keys(this.table).includes(key)) {
this.table[key] = val[key];
}
}
},
getRowKeys(row) {
return row.id;
},
handleSort(column, prop, order) {
this.$emit("tableSort", column, prop, order);
},
handleSelectionChange(val) {
this.$emit("selectChange", val);
},
//多行选择
handleSelectAll(val) {
this.$emit("selectAll", val);
},
//多选
handleSelect(val, row) {
this.$emit("select", val, row);
},
//单选
singleElection(row){
this.$emit("radioSelectChange", row);
}
},
};
</script>
<style scoped>
.b {
color: pink;
}
</style>
javascript
复制代码
<template>
<div>
<HskTable :data="table" @select="tableSlect" @selectChange="selectChange">
<template v-slot:tag_slot="scope">
<el-link type="primary">{{ scope.row.status }}</el-link>
</template>
<template v-slot:controls_slot="scope">
<el-button type="text" @click="viewClick(scope.row)" size="small"
>查看</el-button
>
<el-button type="text" size="small">编辑</el-button>
</template>
<template v-slot:data_siff_slot>
<el-input
v-model="table.roleName"
size="mini"
placeholder="请输入"
clearable
@clear="getList()"
@keyup.enter.native="getList()"
/>
</template>
<template v-slot:age_siff_slot>
<el-input
v-model="table.roleName"
size="mini"
placeholder="请输入"
clearable
@clear="getList()"
@keyup.enter.native="getList()"
/>
</template>
</HskTable>
<br />
</div>
</template>
<script>
import HskTable from "../package/hsk-table/index.vue";
export default {
name: "hskTable",
components: {
HskTable,
},
data() {
return {
isHidden:false,
table: {
showHeader: true, //是否显示表头
size: "small", //列表的型号
fit: true, //列的宽度是否自己撑开
height: "600", //表格高度
isRowBgc: false, //如果需要设定行背景，需要指定rowClassName
rowClassName: {
bgc: "pink",
attrName: "xs",
},
isStripe: false, // 是否边框
isBorder: true,
isMutiSelect: false, //是否需要多选
isRadio: true, //是否单选
// 列数据
columns: [
{
type: "slot",
label: "Tag",
align: "center", //对其方式
headerAlign: "center", //表头对其方式
slot_name: "tag_slot",
prop: "tag",
width: "",
},
{
label: "日期",
prop: "date",
isCondition: true,
slot_siff_name: "data_siff_slot",
width: "",
},
{
label: "年龄",
prop: "age",
isCondition: true,
slot_siff_name: "age_siff_slot",
width: "",
},
{
label: "姓名",
prop: "name",
width: "",
},
{
label: "地址",
prop: "address",
width: "",
},
{
type: "slot",
label: "操作",
slot_name: "controls_slot",
width: "",
},
],
// 行数据
tableData: [
{
id: "1",
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
status: true,
age: 20,
xs: true,
},
{
id: "2",
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
status: true,
age: 20,
xs: false,
},
{
id: "3",
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
status: true,
age: 20,
xs: true,
},
{
id: "4",
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
status: true,
age: 20,
xs: false,
},
{
id: "5",
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
status: true,
age: 20,
xs: true,
},
{
id: "6",
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
status: true,
age: 20,
xs: false,
},
{
id: "7",
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
status: true,
age: 20,
xs: true,
},
{
id: "8",
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
status: true,
age: 20,
xs: false,
},
],
},
};
},
methods: {
//展开隐藏
showHidden(){
this.isHidden = !this.isHidden
},
//行选中
tableSlect(val, row) {
console.log("val, row", val, row);
},
//选中改变
selectChange(val) {
console.log("val", val);
},
},
};
</script>
<style>
.code {
line-height: 20px;
}
.rotate-180 {
transform: rotate(180deg);
transition: transform 0.5s;
}
.rotate-0 {
transform: rotate(0deg);
transition: transform 0.5s;
}
</style>
javascript
复制代码
<template>
<!-- 分页组件 -->
<!-- size-change（每页条数） pageSize 改变时会触发 -->
<!-- current-change（当前页） currentPage 改变时会触发 -->
<!-- page-size 每页显示条目个数，支持 .sync 修饰符 -->
<!-- page-sizes 每页显示个数选择器的选项设置 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
:layout="layout"
:total="total"
>
</el-pagination>
</template>
<script>
export default {
name:"hsk-pagination",
props: {
currentPage: {
type: [String, Number],
default: 1,
},
total: {
type: [String, Number],
default: 0,
},
pageSizes: {
type: Array,
default: () => [10, 15, 30, 50],
},
pageSize: {
type: [String, Number],
default: 10,
},
layout: {
type: String,
default: "total, sizes, prev, pager, next, jumper",
},
},
data() {
return {};
},
methods: {
handleSizeChange(val) {
this.$emit("sizeChange", val);
},
handleCurrentChange(val) {
this.$emit("currentChange", val);
},
},
};
</script>
<style lang="less" scoped>
.page {
text-align: center;
color: #409eff;
}
</style>
