table-operate 表格操作列按钮组（李新星）

基础用法

<template>
  <div>
    <el-table :data="tableData" class="table-operate-basic" style="width: 100%">
			<el-table-column prop="date" label="日期" width="180" column-key="date">
			</el-table-column>
			<el-table-column prop="name" label="姓名" width="180"></el-table-column>
			<el-table-column prop="address" label="地址">
			</el-table-column>
			<el-table-column prop="address" label="操作">
				<template slot-scope="{ row, $index }">
					<table-operate
						v-if="$index < 3"
						:row="row"
						:showButtons="[
							{
								btnName: '开发1',
								cb: testCb1,
								disabled: true
							},
							{
								btnName: '开发2',
								cb: testCb1,
								style: 'color: red'
							}
						]"
						:hideButtons="[
							{
								btnName: '开发1ssssssssssssssssss',
								cb: testCb1,
								disabled: true
							},
							{
								btnName: '开发2',
								cb: testCb1
							}
						]"
					></table-operate>
					<table-operate
					v-else
					:row="row"
					:buttonList="[
						{
							btnName: '按钮1',
							cb: () => {},
							visiable: true
						},
						{
							btnName: '按钮2',
							cb: () => {},
							visiable: false
						},
						{
							btnName: '按钮3',
							cb: () => {},
							visiable: true
						},
						{
							btnName: '按钮4',
							cb: () => {},
							visiable: true
						},
						{
							btnName: '按钮5',
							cb: () => {},
							visiable: true
						},
					]"
					:showNum="3"
					></table-operate>
				</template>
			</el-table-column>
		</el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
			tableData: [
				{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄',
					tag: '家'
				},
				{
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄',
					tag: '公司'
				},
				{
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄',
					tag: '家'
				},
				{
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄',
					tag: '公司'
				}
			], // 表格数据
    }
  },
  methods: {
    testCb1(row) {
			alert(row)
		}
  }
}
</script>
<style>
.table-operate-basic table {
  margin: 0 !important;
}
</style>

显示代码

Attributes

参数	说明	类型	可选值	默认值
row	点击按钮组件回调参数	any	—	—
showButtons	默认展示的按钮组	[{ btnName<按钮名称>, cb<按钮执行的回调>, disabled<禁用> }]	—	—
hideButtons	默认隐藏的按钮组	[{ btnName<按钮名称>, cb<按钮执行的回调>, disabled<禁用> }]	—	—
buttonList	包含默认展示和隐藏的按钮组	[{ btnName<按钮名称>, cb<按钮执行的回调>, visiable<按钮展示条件> }]	—	—
showNum	需要默认展示的按钮数量，和buttonList配合使用	number	大于0的整数	—
moreBtnIcon	隐藏按钮组的图标icon	string	-	"iconfont icon-gengduo"
style	自定义style样式	object/string	-	-